/* ============================================ AVIQRA — Design System & Global Styles Neuromorphic Bento UI · Light Theme ============================================ */ /* Fonts: preconnect hints in HTML accelerate this load */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ---------- Design Tokens ---------- */ :root { /* Colors */ --bg-main: #f0f3f8; --bg-card: #e8ecf1; --bg-white: #ffffff; --bg-elevated: #f5f7fa; /* Neuromorphic shadows */ --shadow-light: -6px -6px 14px rgba(255, 255, 255, 0.7); --shadow-dark: 6px 6px 14px rgba(166, 180, 200, 0.4); --shadow-inset-light: inset -3px -3px 7px rgba(255, 255, 255, 0.5); --shadow-inset-dark: inset 3px 3px 7px rgba(166, 180, 200, 0.25); /* Accent palette — soft pastels */ --accent-primary: #6c63ff; --accent-primary-soft: #e8e6ff; --accent-green: #38c97b; --accent-green-soft: #e0f7ec; --accent-blue: #4e9af1; --accent-blue-soft: #e0edff; --accent-orange: #f5a623; --accent-orange-soft: #fff3e0; --accent-pink: #e966a0; --accent-pink-soft: #fce4f0; --accent-teal: #26c6da; --accent-teal-soft: #e0f7fa; /* WhatsApp */ --whatsapp: #25d366; --whatsapp-hover: #1da851; /* Text */ --text-primary: #1a1f36; --text-secondary: #5a6178; --text-muted: #8e95a9; /* Spacing */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Borders */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; /* Transitions */ --transition-fast: 0.2s ease; --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-main); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; } /* ---------- Utility Classes ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); } .section { padding: var(--space-3xl) 0; } .section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-primary); background: var(--accent-primary-soft); padding: 6px 16px; border-radius: 50px; margin-bottom: var(--space-md); } .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: var(--space-md); color: var(--text-primary); } .section-subtitle { font-size: 1.05rem; color: var(--text-secondary); max-width: 560px; line-height: 1.65; } /* ---------- Neuromorphic Card ---------- */ .neu-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-light), var(--shadow-dark); transition: var(--transition-smooth); } .neu-card:hover { box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.8), 8px 8px 18px rgba(166, 180, 200, 0.5); transform: translateY(-2px); } .neu-inset { background: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-inset-light), var(--shadow-inset-dark); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; padding: 14px 32px; border-radius: var(--radius-md); border: none; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent-primary); color: #fff; box-shadow: 0 4px 15px rgba(108, 99, 255, 0.35), var(--shadow-light), var(--shadow-dark); } .btn-primary:hover { background: #5a52e0; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(108, 99, 255, 0.45), -4px -4px 10px rgba(255, 255, 255, 0.6), 4px 4px 10px rgba(166, 180, 200, 0.4); } .btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3), var(--shadow-light), var(--shadow-dark); } .btn-whatsapp:hover { background: var(--whatsapp-hover); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37, 211, 102, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.6), 4px 4px 10px rgba(166, 180, 200, 0.4); } .btn-outline { background: transparent; color: var(--accent-primary); border: 2px solid var(--accent-primary); box-shadow: var(--shadow-light), var(--shadow-dark); } .btn-outline:hover { background: var(--accent-primary); color: #fff; transform: translateY(-2px); } .btn-ghost { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-light), var(--shadow-dark); } .btn-ghost:hover { transform: translateY(-2px); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.8), 8px 8px 18px rgba(166, 180, 200, 0.5); } /* ============================================ NAVIGATION ============================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--space-md) 0; background: rgba(240, 243, 248, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: var(--transition-smooth); } .navbar.scrolled { box-shadow: 0 4px 20px rgba(166, 180, 200, 0.25); } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .navbar-brand { display: flex; align-items: center; gap: 10px; } .navbar-logo { width: 38px; height: 38px; background: var(--accent-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 3px 10px rgba(108, 99, 255, 0.3); } .navbar-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); } .navbar-links { display: flex; align-items: center; gap: var(--space-xl); list-style: none; } .navbar-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: var(--transition-fast); position: relative; } .navbar-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent-primary); border-radius: 2px; transition: var(--transition-smooth); } .navbar-links a:hover { color: var(--accent-primary); } .navbar-links a:hover::after { width: 100%; } .navbar-cta .btn { padding: 10px 24px; font-size: 0.85rem; } .mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .mobile-toggle span { width: 24px; height: 2.5px; background: var(--text-primary); border-radius: 4px; transition: var(--transition-smooth); } /* ============================================ HERO SECTION ============================================ */ .hero { padding: calc(80px + var(--space-3xl)) 0 var(--space-3xl); min-height: 100vh; display: flex; align-items: center; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); padding: 8px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; color: var(--accent-primary); box-shadow: var(--shadow-light), var(--shadow-dark); margin-bottom: var(--space-lg); } .hero-badge .dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } .hero-title { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.1; margin-bottom: var(--space-lg); letter-spacing: -1px; } .hero-title .highlight { background: linear-gradient(135deg, var(--accent-primary), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.15rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-xl); max-width: 480px; } .hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } .hero-stats { display: flex; gap: var(--space-2xl); margin-top: var(--space-2xl); } .hero-stat { text-align: left; } .hero-stat-number { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); } .hero-stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; } /* Hero Bento Visual */ .hero-visual { position: relative; } .hero-bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); gap: var(--space-md); } .hero-bento-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-light), var(--shadow-dark); transition: var(--transition-smooth); } .hero-bento-card:hover { transform: translateY(-3px); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.8), 8px 8px 18px rgba(166, 180, 200, 0.5); } .hero-bento-card.wide { grid-column: span 2; } .bento-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: var(--space-sm); } .bento-card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; } .bento-card-text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* Mockup bar in hero card */ .mockup-bar { display: flex; gap: 6px; margin-bottom: var(--space-sm); } .mockup-dot { width: 8px; height: 8px; border-radius: 50%; } .mockup-dot.red { background: #ff6b6b; } .mockup-dot.yellow { background: #ffd93d; } .mockup-dot.green { background: #6dd5a0; } .mockup-lines { display: flex; flex-direction: column; gap: 6px; } .mockup-line { height: 6px; border-radius: 4px; background: rgba(108, 99, 255, 0.12); } .mockup-line:nth-child(1) { width: 80%; } .mockup-line:nth-child(2) { width: 60%; } .mockup-line:nth-child(3) { width: 70%; } /* ============================================ FEATURES / BENTO GRID ============================================ */ .features { text-align: center; } .features .section-subtitle { margin: 0 auto var(--space-2xl); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: var(--space-lg); } .feature-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); box-shadow: var(--shadow-light), var(--shadow-dark); text-align: left; transition: var(--transition-smooth); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0; transition: var(--transition-smooth); } .feature-card:hover::before { opacity: 1; } .feature-card:hover { transform: translateY(-4px); box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.85), 8px 8px 20px rgba(166, 180, 200, 0.5); } .feature-card:nth-child(1)::before { background: var(--accent-primary); } .feature-card:nth-child(2)::before { background: var(--accent-green); } .feature-card:nth-child(3)::before { background: var(--accent-orange); } .feature-card:nth-child(4)::before { background: var(--accent-blue); } .feature-card:nth-child(5)::before { background: var(--accent-pink); } .feature-card:nth-child(6)::before { background: var(--accent-teal); } .feature-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--space-md); box-shadow: var(--shadow-inset-light), var(--shadow-inset-dark); } .feature-card:nth-child(1) .feature-icon { background: var(--accent-primary-soft); } .feature-card:nth-child(2) .feature-icon { background: var(--accent-green-soft); } .feature-card:nth-child(3) .feature-icon { background: var(--accent-orange-soft); } .feature-card:nth-child(4) .feature-icon { background: var(--accent-blue-soft); } .feature-card:nth-child(5) .feature-icon { background: var(--accent-pink-soft); } .feature-card:nth-child(6) .feature-icon { background: var(--accent-teal-soft); } .feature-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; } .feature-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } /* ============================================ HOW IT WORKS ============================================ */ .how-it-works { text-align: center; } .how-it-works .section-subtitle { margin: 0 auto var(--space-2xl); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); position: relative; } .steps-grid::before { content: ''; position: absolute; top: 50px; left: 20%; right: 20%; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-blue), var(--accent-green)); border-radius: 4px; z-index: 0; } .step-card { position: relative; z-index: 1; text-align: center; padding: var(--space-xl); } .step-number { width: 56px; height: 56px; margin: 0 auto var(--space-lg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #fff; box-shadow: 0 4px 16px rgba(108, 99, 255, 0.3); } .step-card:nth-child(1) .step-number { background: var(--accent-primary); } .step-card:nth-child(2) .step-number { background: var(--accent-blue); } .step-card:nth-child(3) .step-number { background: var(--accent-green); } .step-icon { font-size: 2rem; margin-bottom: var(--space-sm); } .step-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; } .step-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } /* ============================================ PRICING PREVIEW (Landing page) ============================================ */ .pricing-preview { text-align: center; } .pricing-preview .section-subtitle { margin: 0 auto var(--space-2xl); } .pricing-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .pricing-preview-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-light), var(--shadow-dark); text-align: center; transition: var(--transition-smooth); } .pricing-preview-card:hover { transform: translateY(-4px); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.85), 8px 8px 18px rgba(166, 180, 200, 0.5); } .pricing-preview-card .price-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: var(--space-sm); } .pricing-preview-card .price-amount { font-size: 2rem; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; } .pricing-preview-card .price-period { font-size: 0.85rem; color: var(--text-muted); } .pricing-preview-card.highlighted { background: var(--accent-primary); color: #fff; } .pricing-preview-card.highlighted .price-label, .pricing-preview-card.highlighted .price-period { color: rgba(255, 255, 255, 0.75); } .pricing-preview-card.highlighted .price-amount { color: #fff; } /* ============================================ TRUST / SOCIAL PROOF ============================================ */ .trust-section { text-align: center; } .trust-section .section-subtitle { margin: 0 auto var(--space-2xl); } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .trust-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-light), var(--shadow-dark); text-align: center; transition: var(--transition-smooth); } .trust-card:hover { transform: translateY(-3px); } .trust-icon { font-size: 2.2rem; margin-bottom: var(--space-md); } .trust-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .trust-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } .demo-links { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } .demo-link-card { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-light), var(--shadow-dark); display: flex; align-items: center; gap: var(--space-md); transition: var(--transition-smooth); cursor: pointer; } .demo-link-card:hover { transform: translateY(-2px); box-shadow: -8px -8px 18px rgba(255, 255, 255, 0.8), 8px 8px 18px rgba(166, 180, 200, 0.5); } .demo-link-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .demo-link-title { font-weight: 600; font-size: 0.9rem; } .demo-link-url { font-size: 0.75rem; color: var(--text-muted); } /* ============================================ FINAL CTA ============================================ */ .final-cta { text-align: center; padding: var(--space-3xl) 0; } .final-cta-box { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-2xl); box-shadow: var(--shadow-light), var(--shadow-dark); position: relative; overflow: hidden; } .final-cta-box::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse, rgba(108, 99, 255, 0.06) 0%, transparent 60%); pointer-events: none; } .final-cta-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; margin-bottom: var(--space-md); position: relative; } .final-cta-subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: var(--space-xl); max-width: 500px; margin-left: auto; margin-right: auto; position: relative; } .final-cta-actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; position: relative; } /* ============================================ FOOTER ============================================ */ .footer { background: var(--bg-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-light); padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-xl); } .footer-content { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-xl); } .footer-brand-name { font-size: 1.3rem; font-weight: 800; margin-bottom: var(--space-sm); } .footer-brand-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; max-width: 300px; } .footer-heading { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: var(--space-md); } .footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); } .footer-links a { font-size: 0.9rem; color: var(--text-secondary); transition: var(--transition-fast); } .footer-links a:hover { color: var(--accent-primary); } .footer-bottom { border-top: 1px solid rgba(166, 180, 200, 0.2); padding-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; } .footer-copy { font-size: 0.8rem; color: var(--text-muted); } .footer-socials { display: flex; gap: var(--space-sm); } .footer-social-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg-main); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-secondary); box-shadow: var(--shadow-light), var(--shadow-dark); transition: var(--transition-smooth); border: none; cursor: pointer; } .footer-social-btn:hover { color: var(--accent-primary); transform: translateY(-2px); } /* WhatsApp Floating Button */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), var(--shadow-light), var(--shadow-dark); transition: var(--transition-smooth); cursor: pointer; text-decoration: none; animation: float-bounce 3s ease-in-out infinite; } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55); } @keyframes float-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ============================================ PRICING PAGE SPECIFIC ============================================ */ .pricing-hero { padding: calc(80px + var(--space-3xl)) 0 var(--space-2xl); text-align: center; } .pricing-hero .section-subtitle { margin: 0 auto; } .pricing-cards-section { padding: var(--space-xl) 0 var(--space-3xl); } .pricing-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 820px; margin: 0 auto; } .pricing-card { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-2xl); box-shadow: var(--shadow-light), var(--shadow-dark); transition: var(--transition-smooth); position: relative; } .pricing-card:hover { transform: translateY(-4px); box-shadow: -10px -10px 22px rgba(255, 255, 255, 0.85), 10px 10px 22px rgba(166, 180, 200, 0.5); } .pricing-card.featured { background: linear-gradient(135deg, var(--accent-primary), #8b7bff); color: #fff; box-shadow: 0 12px 40px rgba(108, 99, 255, 0.3), var(--shadow-light); transform: scale(1.03); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-4px); } .pricing-badge { position: absolute; top: -12px; right: 24px; background: var(--accent-orange); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 14px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 3px 10px rgba(245, 166, 35, 0.35); } .pricing-card-name { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-xs); opacity: 0.85; } .pricing-card-price { font-size: 2.8rem; font-weight: 900; margin-bottom: 4px; letter-spacing: -1px; } .pricing-card-period { font-size: 0.85rem; opacity: 0.65; margin-bottom: var(--space-xl); } .pricing-card-divider { height: 1px; background: rgba(166, 180, 200, 0.2); margin-bottom: var(--space-lg); } .pricing-card.featured .pricing-card-divider { background: rgba(255, 255, 255, 0.2); } .pricing-features-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); } .pricing-features-list li { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; font-weight: 500; } .pricing-features-list .check { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; } .pricing-card:not(.featured) .check { background: var(--accent-primary-soft); color: var(--accent-primary); } .pricing-card.featured .check { background: rgba(255, 255, 255, 0.2); color: #fff; } .pricing-card .btn-primary { width: 100%; } .pricing-card.featured .btn-primary { background: #fff; color: var(--accent-primary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .pricing-card.featured .btn-primary:hover { background: #f0f0f0; } /* What's Included Section */ .included-section { padding: var(--space-3xl) 0; text-align: center; } .included-section .section-subtitle { margin: 0 auto var(--space-2xl); } .included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .included-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-light), var(--shadow-dark); text-align: center; transition: var(--transition-smooth); } .included-card:hover { transform: translateY(-3px); } .included-icon { font-size: 2rem; margin-bottom: var(--space-md); } .included-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; } .included-text { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; } /* Payment Section */ .payment-section { padding: var(--space-2xl) 0 var(--space-3xl); text-align: center; } .payment-section .section-subtitle { margin: 0 auto var(--space-xl); } .payment-options { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; } .payment-option { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-light), var(--shadow-dark); display: flex; align-items: center; gap: var(--space-md); min-width: 200px; transition: var(--transition-smooth); } .payment-option:hover { transform: translateY(-2px); } .payment-icon { font-size: 1.5rem; } .payment-name { font-weight: 600; font-size: 0.95rem; } .payment-desc { font-size: 0.75rem; color: var(--text-muted); } /* ============================================ ANIMATIONS ============================================ */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .hero .container { grid-template-columns: 1fr; text-align: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-stats { justify-content: center; } .hero-visual { max-width: 500px; margin: 0 auto; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid::before { display: none; } .pricing-preview-grid { grid-template-columns: repeat(3, 1fr); } .footer-content { grid-template-columns: 1fr 1fr; } .included-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .navbar-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(240, 243, 248, 0.98); backdrop-filter: blur(16px); flex-direction: column; padding: var(--space-lg); gap: var(--space-md); box-shadow: 0 10px 30px rgba(166, 180, 200, 0.3); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .navbar-links.active { display: flex; } .navbar-cta { display: none; } .mobile-toggle { display: flex; } .hero { min-height: auto; padding-top: calc(80px + var(--space-2xl)); } .hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); } .hero-stats { gap: var(--space-lg); } .hero-bento { grid-template-columns: 1fr 1fr; } .feature-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .pricing-preview-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; } .trust-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } .demo-links { flex-direction: column; align-items: center; } .pricing-cards-grid { grid-template-columns: 1fr; max-width: 420px; } .pricing-card.featured { transform: scale(1); order: -1; } .pricing-card.featured:hover { transform: translateY(-4px); } .included-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } .footer-content { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; } .final-cta-box { padding: var(--space-2xl) var(--space-lg); } .payment-options { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .container { padding: 0 var(--space-md); } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .hero-bento { grid-template-columns: 1fr; } .hero-bento-card.wide { grid-column: span 1; } .btn { padding: 12px 24px; font-size: 0.9rem; } .whatsapp-float { width: 52px; height: 52px; font-size: 1.4rem; bottom: 20px; right: 20px; } }