:root { --evert-primary: #2563eb; --evert-primary-soft: #dbeafe; --evert-dark: #020617; --evert-accent: #22c55e; --evert-danger: #f97373; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #020617; color: #e5e7eb; } .navbar { backdrop-filter: blur(16px); background: rgba(15, 23, 42, 0.85); } .navbar-brand span { font-weight: 700; letter-spacing: 0.05em; } .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); border: none; } .btn-outline-light:hover { color: #0f172a; background-color: #e5e7eb; } .hero { padding-top: 7rem; padding-bottom: 5rem; background: radial-gradient(circle at top left, #0b1120 0, #020617 45%, #020617 100%); } .hero-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.25rem 0.75rem; background-color: rgba(15, 23, 42, 0.8); border: 1px solid rgba(148, 163, 184, 0.35); font-size: 0.8rem; color: #e5e7eb; } .hero-badge i { color: var(--evert-accent); margin-right: 0.35rem; } .hero-title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; } .hero-highlight { background: linear-gradient(135deg, #60a5fa, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-subtitle { color: #9ca3af; font-size: 1rem; } .hero-metrics { border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.35); background: radial-gradient(circle at top, rgba(37, 99, 235, 0.25), rgba(15, 23, 42, 0.98)); } .hero-metric-label { font-size: 0.85rem; color: #9ca3af; } .hero-metric-value { font-size: 1.4rem; font-weight: 700; } .hero-slogans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .slogan-card { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.25); background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(34, 197, 94, 0.08)); } .slogan-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.9rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(148, 163, 184, 0.35); color: #60a5fa; } .slogan-title { margin: 0; font-weight: 700; color: #e5e7eb; } .slogan-text { margin: 0; color: #9ca3af; font-size: 0.9rem; } .hero-terminal { border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.4); background: radial-gradient(circle at top left, #020617, #020617 60%, #020617 100%); box-shadow: 0 35px 120px rgba(15, 23, 42, 0.9); } .terminal-header { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(30, 64, 175, 0.6); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgb(15, 23, 42), rgba(30, 64, 175, 0.7)); } .terminal-dots span { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; margin-right: 0.2rem; } .terminal-dots span:nth-child(1) { background-color: #f97373; } .terminal-dots span:nth-child(2) { background-color: #fbbf24; } .terminal-dots span:nth-child(3) { background-color: #34d399; } .terminal-body { padding: 1rem 1.25rem; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.8rem; max-height: 360px; overflow-y: auto; } .terminal-line { color: #e5e7eb; } .terminal-line span.cmd { color: #60a5fa; } .terminal-line span.ai { color: #a855f7; } .terminal-line span.tag { color: #22c55e; } .terminal-line span.warn { color: #fbbf24; } .hero-visual { position: relative; padding: 1.5rem; border-radius: 1.5rem; background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.18), rgba(2, 6, 23, 0.9) 60%); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 35px 120px rgba(15, 23, 42, 0.9); overflow: hidden; } .hero-visual::before, .hero-visual::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 999px; filter: blur(70px); opacity: 0.5; } .hero-visual::before { background: #2563eb; top: -40px; right: -60px; } .hero-visual::after { background: #22c55e; bottom: -80px; left: -60px; } .hero-visual > * { position: relative; z-index: 1; } .hero-visual-meta { margin-top: 1rem; padding: 1rem; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(8px); } .stat-pill { flex: 1 1 160px; min-width: 0; padding: 0.75rem 1rem; border-radius: 0.75rem; background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.2), rgba(2, 6, 23, 0.85)); border: 1px solid rgba(148, 163, 184, 0.35); } .stat-label { display: block; font-size: 0.8rem; color: #9ca3af; } .stat-value { font-weight: 700; } .section { padding-top: 4.5rem; padding-bottom: 4.5rem; } .section-heading { font-size: 1.9rem; font-weight: 700; } .section-subtitle { color: #9ca3af; max-width: 540px; } .bg-surface { background: radial-gradient(circle at top, #020617 0, #020617 50%, #020617 100%); border-radius: 1.5rem; border: 1px solid rgba(148, 163, 184, 0.35); } .feature-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.9rem; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(37, 99, 235, 0.1); color: #60a5fa; margin-bottom: 0.75rem; } .badge-soft { border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.7rem; background-color: rgba(15, 23, 42, 0.85); border: 1px solid rgba(148, 163, 184, 0.35); color: #9ca3af; } .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; } .contact-card { border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 1rem; padding: 0.85rem 1rem; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); } .contact-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.2rem; } .contact-value { font-weight: 700; font-size: 1.1rem; } .contact-meta { margin: 0; color: #9ca3af; font-size: 0.85rem; } .pricing-card { border-radius: 1.25rem; border: 1px solid rgba(148, 163, 184, 0.35); background: radial-gradient(circle at top, rgb(15, 23, 42), #020617); height: 100%; display: flex; flex-direction: column; } .pricing-card.popular { border-color: #60a5fa; box-shadow: 0 25px 80px rgba(37, 99, 235, 0.4); position: relative; } .pricing-card.popular::before { content: "Most popular"; position: absolute; top: -0.9rem; right: 1.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.6rem; border-radius: 999px; background: linear-gradient(135deg, #60a5fa, #22c55e); color: #020617; font-weight: 600; } .pricing-price { font-size: 1.9rem; font-weight: 700; } .pricing-price span { font-size: 0.9rem; color: #9ca3af; font-weight: 400; } .pricing-limit { font-size: 0.85rem; color: #9ca3af; } .pricing-feature-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .pricing-feature-list li { display: flex; align-items: flex-start; margin-bottom: 0.4rem; } .pricing-feature-list i { margin-right: 0.35rem; margin-top: 0.2rem; font-size: 0.9rem; } .pricing-toggle { border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.4); padding: 0.25rem; background-color: rgba(15, 23, 42, 0.9); } .pricing-toggle button { border-radius: 999px; border: 0; padding: 0.35rem 0.9rem; font-size: 0.8rem; } .pricing-toggle button.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #f9fafb; } .pricing-toggle button:not(.active) { background: transparent; color: #9ca3af; } .bullet-check { display: flex; align-items: flex-start; margin-bottom: 1rem; } .bullet-check i { margin-right: 0.5rem; margin-top: 0.15rem; color: #22c55e; } .modal-evert .modal-content { background: #0b1224; box-shadow: 0 35px 120px rgba(15, 23, 42, 0.8); } .modal-evert .modal-header, .modal-evert .modal-footer { background: rgba(15, 23, 42, 0.75); } .modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } footer { border-top: 1px solid rgba(31, 41, 55, 0.9); padding-top: 2rem; padding-bottom: 2rem; font-size: 0.85rem; color: #9ca3af; } footer a { color: #9ca3af; } footer a:hover { color: #e5e7eb; } @media (max-width: 991.98px) { .hero { padding-top: 6rem; } } .landing-body { background: #0b0e16; color: #e4e7ef; font-family: "Inter", sans-serif; } .landing-header { background: rgba(10, 13, 22, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); } .landing-logo { font-size: 1.5rem; font-weight: 700; color: #fff; text-decoration: none; } .landing-logo:hover { opacity: 0.8; } .landing-header .nav-link { color: #bcc2d0; margin-left: 24px; font-weight: 500; text-decoration: none; } .landing-header .nav-link:hover { color: #fff; } .section-heading { font-size: 2rem; font-weight: 700; color: #fff; } .section-subtitle { max-width: 640px; color: #9aa0ad; } .pricing-toggle { background: #161b27; padding: 6px; border-radius: 50px; } .pricing-toggle button { border: none; background: transparent; color: #8c96a8; padding: 8px 20px; border-radius: 40px; font-weight: 600; transition: 0.25s ease; } .pricing-toggle button.active { background: linear-gradient(135deg, #00eaff, #0062ff); color: #0b0e16; } .pricing-toggle button:hover:not(.active) { background: rgba(255, 255, 255, 0.08); } .pricing-card { background: #141824; border-radius: 18px; padding: 24px; height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.3s ease; } .pricing-card:hover { transform: translateY(-4px); box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.45); } .pricing-card.popular { border: 1px solid rgba(0, 255, 209, 0.45); box-shadow: 0px 0px 24px rgba(0, 255, 209, 0.2); } .pricing-card .btn { font-weight: 600; border-radius: 10px; } .btn-gradient { background: linear-gradient(135deg, #00ffa6, #00c3ff); border: none; color: #0b0e16; font-weight: 700; } .btn-gradient:hover { opacity: 0.85; } .pricing-price { font-size: 2rem; font-weight: 700; color: #fff; } .pricing-price span { font-size: 1rem; color: #7d8596; } .pricing-feature-list { list-style: none; padding-left: 0; } .pricing-feature-list li { margin-bottom: 10px; display: flex; gap: 10px; color: #c4cad7; } .pricing-feature-list li i { color: #29ffdb; } .landing-footer { margin-top: 120px; color: #8f97a8; } @media (max-width: 768px) { .section-heading { font-size: 1.5rem; } }