@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"); :root { --mp-bg: #051018; --mp-panel: rgba(9, 24, 34, 0.78); --mp-panel-strong: rgba(12, 31, 43, 0.92); --mp-line: rgba(159, 211, 230, 0.2); --mp-text: #eefbff; --mp-muted: rgba(226, 243, 250, 0.78); --mp-soft: rgba(226, 243, 250, 0.62); --mp-cyan: #3bd8ff; --mp-green: #47e69a; } .pricing-page, #faq, #contact, #security, #enterprise-section, .cli-page, .detail-container, .founder-section, #mentions, #cgu { position: relative; isolation: isolate; overflow: hidden; color: var(--mp-text); font-family: "IBM Plex Sans", "Space Grotesk", sans-serif; background: transparent; } .pricing-page::before, #faq::before, #contact::before, #security::before, #enterprise-section::before, .cli-page::before, .detail-container::before, .founder-section::before, #mentions::before, #cgu::before { content: none; } .how-page { position: relative; isolation: isolate; overflow: hidden; color: var(--mp-text); font-family: "IBM Plex Sans", "Space Grotesk", sans-serif; } .pricing-hero, #faq > h2, #contact > h2, #security > h1, #enterprise-section > .page-title, .cli-page-title, .detail-container > .page-title, .founder-section h2, #mentions > h1, #cgu > h1 { max-width: 980px; margin-left: auto; margin-right: auto; text-align: center; } .pricing-page { padding-top: clamp(46px, 6vw, 74px) !important; } .pricing-hero { margin-bottom: clamp(28px, 4vw, 46px) !important; } .pricing-carousel-wrapper { align-items: stretch !important; } .pricing-hero h1, #faq > h2, #contact > h2, #security > h1, #enterprise-section > .page-title, .cli-page-title, .detail-container > .page-title, .founder-section h2, #mentions > h1, #cgu > h1 { color: #fff !important; font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: clamp(2.45rem, 4.8vw, 4.55rem) !important; line-height: 1.02; letter-spacing: 0; text-shadow: none !important; } .pricing-hero h1::after, #faq > h2::after, #contact > h2::after, #security > h1::after, #enterprise-section > .page-title::after, .cli-page-title::after, .detail-container > .page-title::after, .founder-section h2::after, #mentions > h1::after, #cgu > h1::after { content: ''; display: block; width: 74px; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, var(--mp-cyan), var(--mp-green)); } .pricing-lead, .enterprise-intro, .cli-page-tagline, .cli-page-summary, .summary, .security-note, .founder-content p, #mentions p, #cgu p, #faq-search { color: var(--mp-muted) !important; } .pricing-card, .faq-item, .faq-toc, .contact-container, .security-container, .mode-card, .licence-card, .cli-section, .detail-card, .founder-content, .mentions-container, .cgu-container { border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32) !important; backdrop-filter: blur(14px); } .pricing-card:hover, .faq-item:hover, .mode-card:hover, .detail-card:hover { border-color: rgba(59, 216, 255, 0.34) !important; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.4), 0 0 36px rgba(59, 216, 255, 0.08) !important; } .pricing-card--highlight, .pricing-card--selected { border-color: rgba(71, 230, 154, 0.55) !important; background: linear-gradient(180deg, rgba(71, 230, 154, 0.11), rgba(255, 255, 255, 0.025)) !important; } .pricing-hook, .pricing-tier--plus, .faq-cat-title, .security-container h2, .mode-card h3, .cli-section h3, .detail-card h3, #mentions h2, #cgu h2 { color: var(--mp-cyan) !important; } .pricing-badge, .pricing-mini-badge, .cli-page-require { border: 1px solid rgba(71, 230, 154, 0.28) !important; background: rgba(71, 230, 154, 0.13) !important; color: var(--mp-green) !important; } .pricing-cta, .contact-btn, .core-btn, .cta-btn.primary, .cta-btn.buy { border-radius: 8px !important; background: linear-gradient(135deg, var(--mp-green), #8bf7c1) !important; color: #04120d !important; border: 0 !important; box-shadow: 0 22px 44px rgba(71, 230, 154, 0.18) !important; } .cta-btn.secondary, .detail-actions .cta-btn.secondary, .cli-actions .cta-btn.secondary { border-radius: 8px !important; border: 1px solid rgba(59, 216, 255, 0.34) !important; background: rgba(59, 216, 255, 0.11) !important; color: #dff9ff !important; box-shadow: none !important; } .pricing-cta:hover, .contact-btn:hover, .core-btn:hover, .cta-btn.primary:hover, .cta-btn.buy:hover, .cta-btn.secondary:hover { transform: translateY(-2px); } #faq-search, .contact-input, .contact-select, .contact-textarea { border-radius: 8px !important; border: 1px solid rgba(59, 216, 255, 0.42) !important; background: rgba(4, 14, 22, 0.74) !important; color: var(--mp-text) !important; box-shadow: none !important; } .contact-mode-switch, .contact-tab { border-radius: 8px !important; } .contact-tab.is-active { background: rgba(59, 216, 255, 0.16) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(59, 216, 255, 0.34) !important; } .how-page .hero-screenshot-card, .how-media .hero-screenshot-card, .how-eve-media .hero-screenshot-card { border-radius: 8px !important; border-color: var(--mp-line) !important; } .how-hero-title, .how-section-title { letter-spacing: 0 !important; } .how-module-item, .how-step, .how-principle-item, .how-security-callout, .how-eve-panel, .how-final-cta { border-radius: 8px !important; } .security-table-wrap, .security-table th, .security-table td { border-color: var(--mp-line) !important; } .security-table thead { background: rgba(59, 216, 255, 0.13) !important; } @media (max-width: 760px) { .pricing-page { max-width: 100vw !important; margin-top: 0 !important; padding: 26px 16px 58px !important; } .pricing-hero { margin-bottom: 22px !important; } .pricing-hero .pricing-lead { max-width: 31ch !important; font-size: 1.03rem !important; line-height: 1.55 !important; } .pricing-carousel-wrapper { margin-inline: -16px !important; width: calc(100% + 32px) !important; overflow: hidden !important; } .pricing-grid { gap: 14px !important; padding: 0 16px 18px !important; scroll-padding-left: 16px !important; } .pricing-card { flex-basis: min(336px, calc(100vw - 44px)) !important; max-width: calc(100vw - 44px) !important; padding: 24px 20px 24px !important; } .pricing-page, #faq, #contact, #security, #enterprise-section, .cli-page, .detail-container, .founder-section, #mentions, #cgu { background-size: 28px 28px, auto, auto, auto; } .pricing-hero h1, #faq > h2, #contact > h2, #security > h1, #enterprise-section > .page-title, .cli-page-title, .detail-container > .page-title, .founder-section h2, #mentions > h1, #cgu > h1 { font-size: clamp(2rem, 10.5vw, 3rem) !important; } .pricing-page, #faq, #contact, #security, #enterprise-section, .cli-page, .detail-container, .founder-section, #mentions, #cgu { overflow-x: hidden; } } #faq { padding: clamp(54px, 6vw, 82px) 20px 82px !important; } #faq > h2 { margin-bottom: 16px !important; } .faq-lead { max-width: 760px; margin: 0 auto 24px; color: var(--mp-muted); font-size: clamp(1.03rem, 1.6vw, 1.2rem); line-height: 1.65; text-align: center; } .faq-search-wrap { width: min(100%, 620px); margin: 0 auto 28px; } #faq-search { width: 100%; margin: 0 !important; padding: 14px 16px !important; font-size: 1rem !important; } #faq .faq-toc { width: min(100%, 1080px); margin: 0 auto 32px !important; padding: 16px !important; } #faq .faq-toc-title { margin: 0 0 12px !important; color: #fff !important; font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: 1rem; } #faq .faq-toc ul { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #faq .faq-toc li a { display: flex !important; align-items: center; min-height: 42px; border-radius: 8px !important; background: rgba(4, 14, 22, 0.52) !important; color: rgba(238, 251, 255, 0.88) !important; border: 1px solid rgba(159, 211, 230, 0.14) !important; padding: 8px 12px !important; line-height: 1.25; } #faq .faq-toc li a:hover { color: var(--mp-cyan) !important; border-color: rgba(59, 216, 255, 0.34) !important; background: rgba(59, 216, 255, 0.08) !important; } #faq-list { width: min(100%, 1080px) !important; max-width: none !important; display: grid; gap: 26px; } #faq .faq-section { display: grid; grid-template-columns: minmax(180px, 245px) minmax(0, 1fr); gap: 10px 22px; align-items: start; } #faq .faq-cat-title { grid-row: 1 / span 80; margin: 0 !important; padding: 2px 0 0 !important; color: var(--mp-cyan) !important; font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: 1.05rem; line-height: 1.25; text-align: left; } #faq .faq-item { grid-column: 2; margin: 0 !important; padding: 0 !important; overflow: hidden; border-left: 0 !important; } #faq .faq-q { position: relative; margin: 0 !important; padding: 17px 54px 17px 18px; color: #fff !important; font-size: 1rem !important; line-height: 1.35; } #faq .faq-q::after { content: '+'; position: absolute; top: 50%; right: 18px; width: 26px; height: 26px; border: 1px solid rgba(59, 216, 255, 0.24); border-radius: 50%; color: var(--mp-cyan); transform: translateY(-50%); display: inline-grid; place-items: center; font-weight: 800; } #faq .faq-item.is-open .faq-q::after { content: '-'; } #faq .faq-a { margin: 0 !important; padding: 0 18px 18px !important; color: var(--mp-muted) !important; font-size: 0.98rem !important; line-height: 1.65 !important; } .founder-section { padding: clamp(58px, 7vw, 92px) 20px 86px !important; } .about-shell { width: min(100%, 1120px); margin: 0 auto; } .about-hero { max-width: 840px; margin: 0 auto 34px; text-align: center; } .about-kicker { margin: 0 0 12px; color: var(--mp-cyan); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; } .about-lead { max-width: 720px; margin: 22px auto 0; color: var(--mp-muted); font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.65; } .about-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(280px, 0.86fr); gap: 22px; align-items: stretch; } .founder-content { max-width: none !important; min-width: 0; padding: clamp(24px, 3vw, 34px) !important; } .founder-content blockquote { margin: 0; color: rgba(238, 251, 255, 0.86); font-size: clamp(1rem, 1.25vw, 1.08rem); line-height: 1.72; overflow-wrap: anywhere; } .founder-sign { display: grid; gap: 4px; margin-top: 24px !important; padding-top: 18px; border-top: 1px solid rgba(159, 211, 230, 0.14); } .about-principles { min-width: 0; border-top: 1px solid rgba(59, 216, 255, 0.26); border-bottom: 1px solid rgba(159, 211, 230, 0.14); } .about-principle { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; padding: 22px 0; border-bottom: 1px solid rgba(159, 211, 230, 0.14); } .about-principle:last-child { border-bottom: 0; } .about-principle span { color: var(--mp-green); font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-weight: 800; } .about-principle strong { color: #fff; font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: 1.08rem; } .about-principle p { grid-column: 2; margin: -6px 0 0; color: var(--mp-muted); line-height: 1.55; } @media (max-width: 860px) { #faq .faq-section, .about-grid { grid-template-columns: 1fr; } #faq .faq-cat-title, #faq .faq-item { grid-column: 1; } #faq .faq-cat-title { grid-row: auto; margin-top: 4px !important; } .about-principles { padding: 0 2px; } } @media (max-width: 760px) { #faq { padding: 42px 14px 68px !important; } #faq > h2 { font-size: clamp(2.15rem, 11vw, 2.8rem) !important; margin-bottom: 12px !important; } .faq-lead { max-width: 32ch; margin-bottom: 18px; font-size: 1.02rem; line-height: 1.48; } .faq-search-wrap { margin-bottom: 18px; } #faq-search { padding: 12px 13px !important; font-size: 0.95rem !important; } #faq .faq-toc { margin-bottom: 24px !important; padding: 12px !important; } #faq .faq-toc-title { margin-bottom: 10px !important; font-size: 0.95rem; } #faq .faq-toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px !important; } #faq .faq-toc li a { justify-content: center; min-height: 42px; padding: 8px !important; font-size: 0.82rem; text-align: center; } #faq-list { gap: 20px; } #faq .faq-cat-title { font-size: 1rem; } #faq .faq-q { padding: 15px 48px 15px 15px; font-size: 0.96rem !important; } #faq .faq-a { padding: 0 15px 15px !important; font-size: 0.94rem !important; } .founder-section { padding: 46px 14px 70px !important; } .about-hero { margin-bottom: 24px; } .about-kicker { font-size: 0.68rem; letter-spacing: 0.12em; } .about-lead { max-width: 33ch; margin-top: 16px; font-size: 1.02rem; line-height: 1.52; } .founder-content { padding: 18px !important; } .founder-content blockquote { font-size: 0.92rem; line-height: 1.56; } .about-principle { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; } }