/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-bg: #000000; --secondary-bg: #0a0a0a; --accent-green: #00ff88; --accent-green-bright: #00ff99; --accent-blue: #0066ff; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #888888; --border-color: #2a2a2a; --glow-green: rgba(0, 255, 136, 0.4); --glow-green-bright: rgba(0, 255, 153, 0.6); --glow-blue: rgba(0, 102, 255, 0.3); --gradient-primary: linear-gradient(135deg, #000000, #1a4d3a, #00ff88); --gradient-dark: linear-gradient(135deg, #000000, #0a0a0a); --gradient-green: linear-gradient(135deg, var(--accent-green), var(--accent-green-bright)); /* Navigation bar */ --nav-link: rgba(255, 255, 255, 0.74); --nav-bg: rgba(0, 0, 0, 0.72); --nav-bg-solid: rgba(4, 8, 6, 0.94); --nav-rule: rgba(0, 255, 136, 0.16); } /* clip (not hidden) so the shake's few px of displacement can never flash a scrollbar, without turning into a scroll container */ html { overflow-x: clip; } body { font-family: 'Inter', sans-serif; background: var(--primary-bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; } /* Add smooth transitions globally */ * { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Add floating animation */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Add glow pulse animation */ @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px var(--glow-green); } 50% { box-shadow: 0 0 40px var(--glow-green-bright), 0 0 60px var(--glow-green); } } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: var(--nav-bg); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; z-index: 1000; padding: 1.15rem 0; transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; } /* Off the hero the bar earns a hard edge and a seat; over the hero it stays near-invisible so the light behind it is uninterrupted. */ .navbar.is-scrolled { background: var(--nav-bg-solid); border-bottom-color: var(--nav-rule); padding: 0.75rem 0; box-shadow: 0 1px 0 rgba(0, 255, 136, 0.06), 0 18px 40px -28px rgba(0, 0, 0, 0.9); } .nav-container { max-width: 1240px; margin: 0 auto; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .nav-logo { display: flex; align-items: center; position: relative; z-index: 2; } .logo-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.6rem; color: #ffffff; letter-spacing: -0.03em; text-transform: lowercase; } /* The one place the wordmark carries the brand colour. */ .logo-wordmark::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 3px; vertical-align: 0.06em; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--glow-green-bright); animation: logoDot 3.6s ease-in-out infinite; } @keyframes logoDot { 0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--glow-green-bright); } 50% { opacity: 0.55; box-shadow: 0 0 4px var(--glow-green); } } .nav-menu { position: relative; display: flex; list-style: none; align-items: center; gap: 0.15rem; padding: 0.3rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); } /* One indicator that glides between items rather than nine that fade in independently. It rests on the section you are in and follows the pointer, so the bar always shows where you are even when nothing is hovered. */ .nav-menu::before { content: ''; position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; width: var(--pill-w, 0px); border-radius: 999px; background: rgba(0, 255, 136, 0.13); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.30), 0 0 22px -6px var(--glow-green); transform: translateX(var(--pill-x, 0px)); opacity: var(--pill-o, 0); pointer-events: none; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), width 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease; } /* Before the script has measured anything there is no indicator to show, so nothing depends on JS to be readable. */ .nav-menu:not(.has-pill)::before { display: none; } .nav-link { position: relative; z-index: 1; display: block; padding: 0.5rem 0.85rem; border-radius: 999px; color: var(--nav-link); text-decoration: none; font-weight: 500; font-size: 0.9rem; letter-spacing: -0.005em; white-space: nowrap; transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: #ffffff; } /* Keyboard users get a visible ring; the gliding indicator is not one. */ .nav-link:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; } /* Fallback if the indicator never initialises (no JS, or a script error): the current section still reads as current. Desktop only — the mobile sheet has no capsule to sit in and marks the active link with colour instead. */ @media (min-width: 1081px) { .nav-menu:not(.has-pill) .nav-link.is-active { background: rgba(0, 255, 136, 0.13); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.30); } } /* --- Book a call, the only colour in the bar ------------------------------ */ .nav-cta-btn { display: inline-block; padding: 0.58rem 1.15rem; border-radius: 999px; background: var(--gradient-green); color: #04120a; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; box-shadow: 0 0 18px -4px var(--glow-green); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease; } .nav-cta-btn:hover, .nav-cta-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 26px -8px var(--glow-green-bright); } .nav-cta-bar { position: relative; z-index: 2; } /* The CTA only exists inside the mobile panel; the desktop bar stays links-only. */ .nav-cta { display: none; } .nav-toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; margin-right: -10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-toggle-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: #ffffff; transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.36s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--accent-green); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); } @media (max-width: 1080px) { .nav-toggle { display: flex; } /* backdrop-filter makes .navbar the containing block for ANY fixed-position descendant, which would pin the sheet below to the height of the bar itself. The bar sits on near-black here anyway, so the blur buys nothing. */ .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, 0.88); } .navbar.is-scrolled { background: var(--nav-bg-solid); } /* While the sheet is open the bar is part of it, not a band across it. */ body.nav-open .navbar, body.nav-open .navbar.is-scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; } body.nav-open .chatbot-widget { display: none; } /* Same

, restyled as a sheet, so the warp links and the active-section observer keep working without a duplicated menu to fall out of sync. */ .nav-cta-bar { display: none; } .nav-menu::before { display: none; } .nav-menu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; border: 0; border-radius: 0; padding: 5.75rem 1.75rem 2.5rem; background: radial-gradient(ellipse 90% 45% at 50% 108%, rgba(0, 255, 136, 0.20) 0%, transparent 70%), rgba(2, 6, 4, 0.98); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.32s; } body.nav-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } body.nav-open { overflow: hidden; } .nav-menu li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); } .nav-menu .nav-link { display: block; padding: 0.82rem 0; border-radius: 0; background: none; box-shadow: none; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.9); } .nav-menu .nav-link.is-active { color: var(--accent-green); } .nav-cta { display: block; border-top: 0 !important; margin-top: 1.5rem; } .nav-cta .nav-cta-btn { display: block; text-align: center; padding: 1rem 1.5rem; font-size: 1.02rem; } } .cta-button { background: var(--gradient-green); color: var(--primary-bg); border: 1px solid var(--accent-green); padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 20px var(--glow-green); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--glow-green-bright); background: var(--accent-green-bright); } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at bottom center, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.1) 30%, #000000 70%); } .hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* Green light effect from bottom center */ .hero-background::before { content: ''; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 150%; height: 150%; background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.4) 0%, rgba(0, 255, 136, 0.2) 25%, rgba(0, 255, 136, 0.1) 50%, transparent 70%); animation: lightPulse 8s ease-in-out infinite; z-index: -1; } @keyframes lightPulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } } .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 255, 136, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { transform: translate(0, 0); opacity: 0.3; } 50% { opacity: 0.6; } 100% { transform: translate(50px, 50px); opacity: 0.3; } } .animated-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .animated-lines::before, .animated-lines::after { content: ''; position: absolute; width: 2px; height: 100px; background: var(--gradient-green); animation: lineMove 8s linear infinite; box-shadow: 0 0 20px var(--glow-green); } .animated-lines::before { top: -100px; left: 20%; animation-delay: 0s; } .animated-lines::after { top: -100px; right: 30%; animation-delay: 4s; } @keyframes lineMove { 0% { transform: translateY(-100px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .hero-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; text-align: center; z-index: 2; position: relative; } .hero-content { margin-bottom: 3rem; } .hero-visual { display: none; /* Hide the sync diagram to match the reference image */ } .hero-title { font-family: 'Space Grotesk', sans-serif; font-size: 5rem; font-weight: 700; line-height: 1.1; margin-bottom: 2rem; letter-spacing: -1px; animation: float 8s ease-in-out infinite; } .title-line { display: block; transition: all 0.5s ease; margin-bottom: 0.2rem; } .title-line.glow { color: var(--text-primary); font-weight: 300; } /* Was a 1.3rem #ccc slab with 1px tracking: the centred-grey-paragraph look that reads as filler no matter what it says. Smaller and brighter so it sits under the display type as a deck line rather than competing with it, tracking back to normal (1px on body text thins the stroke and is the main reason it looked generic), and the closing word carries the weight. */ .hero-subtitle { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: rgba(255, 255, 255, 0.72); margin-bottom: 3rem; line-height: 1.62; max-width: 47ch; margin-left: auto; margin-right: auto; letter-spacing: 0; text-wrap: pretty; } .hero-buttons { display: flex; justify-content: center; gap: 1.5rem; } .btn-primary { background: var(--gradient-green); color: var(--primary-bg); border: none; padding: 1rem 2rem; border-radius: 30px; font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 30px var(--glow-green); animation: glowPulse 6s ease-in-out infinite; text-decoration: none; display: inline-block; } .btn-primary:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px var(--glow-green-bright); background: var(--accent-green-bright); } .btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--accent-green); padding: 1rem 2rem; border-radius: 30px; font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn-secondary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gradient-green); transition: left 0.4s ease; z-index: -1; } .btn-secondary:hover { color: var(--primary-bg); border-color: var(--accent-green-bright); transform: translateY(-3px); box-shadow: 0 10px 30px var(--glow-green); } .btn-secondary:hover::before { left: 0; } /* Sync Diagram */ .sync-diagram { position: relative; width: 400px; height: 400px; margin: 0 auto; animation: float 10s ease-in-out infinite; } .node { position: absolute; width: 60px; height: 60px; background: var(--gradient-green); border: 2px solid var(--accent-green-bright); border-radius: 50%; box-shadow: 0 0 30px var(--glow-green); animation: pulse 2s ease-in-out infinite; } .node-1 { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; } .node-2 { top: 50%; right: 0; transform: translateY(-50%); animation-delay: 0.5s; } .node-3 { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 1s; } .node-4 { top: 50%; left: 0; transform: translateY(-50%); animation-delay: 1.5s; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 30px var(--glow-green); } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 50px var(--glow-green-bright), 0 0 80px var(--glow-green); } } .connection { position: absolute; background: var(--gradient-green); height: 3px; box-shadow: 0 0 15px var(--glow-green); animation: connectionFlow 3s ease-in-out infinite; border-radius: 2px; } .connection-1 { top: 30px; left: 50%; width: 120px; transform: translateX(-50%) rotate(45deg); } .connection-2 { top: 50%; right: 30px; width: 120px; transform: translateY(-50%) rotate(135deg); } .connection-3 { bottom: 30px; left: 50%; width: 120px; transform: translateX(-50%) rotate(-45deg); } @keyframes connectionFlow { 0%, 100% { opacity: 0.6; box-shadow: 0 0 15px var(--glow-green); } 50% { opacity: 1; box-shadow: 0 0 30px var(--glow-green-bright), 0 0 50px var(--glow-green); } } .pulse-center { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background: var(--accent-green-bright); border-radius: 50%; transform: translate(-50%, -50%); animation: centerPulse 2s ease-in-out infinite; box-shadow: 0 0 20px var(--glow-green-bright); } @keyframes centerPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px var(--glow-green-bright); } 50% { transform: translate(-50%, -50%) scale(2); box-shadow: 0 0 40px var(--glow-green-bright), 0 0 60px var(--glow-green); } } /* Sections */ .section-header { text-align: center; margin-bottom: 4rem; } .section-title { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); letter-spacing: -0.5px; position: relative; animation: float 12s ease-in-out infinite; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: var(--gradient-green); border-radius: 2px; box-shadow: 0 0 20px var(--glow-green); } .section-subtitle { font-size: 1.2rem; color: var(--text-secondary); font-weight: 300; } /* Features Section */ .features { padding: 6rem 0; background: var(--secondary-bg); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent, rgba(0, 255, 136, 0.1), transparent); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } .feature-card:hover { transform: translateY(-15px) scale(1.02); border-color: var(--accent-green); box-shadow: 0 25px 50px rgba(0, 255, 136, 0.2); } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--gradient-green); border: 2px solid var(--accent-green-bright); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px var(--glow-green); transition: all 0.4s ease; animation: glowPulse 8s ease-in-out infinite; } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(360deg); box-shadow: 0 0 50px var(--glow-green-bright); } .feature-icon svg { width: 36px; height: 36px; color: var(--primary-bg); } @keyframes iconSpinIn { from { transform: scale(0.8) rotate(0deg); } to { transform: scale(1) rotate(360deg); } } .feature-icon.spin-once { animation: iconSpinIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .feature-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); font-weight: 700; letter-spacing: -0.3px; } .feature-card p { color: var(--text-secondary); line-height: 1.6; font-weight: 300; } /* Solutions Section */ /* "What we build": the three service cards, then the two flagship builds that used to be their own #hub and #customer-ai sections. They keep their own class names, so only the vertical rhythm and the heading scale change. */ .work { padding: 6rem 0 0; } .work .hub { padding: 7rem 0 0; } .work .cai { padding: 7rem 0 120px; } /* A hairline is enough to separate the parts; each already opens with its own eyebrow and heading. */ .work-case::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 44px)); height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.22), transparent); } /* The two builds are subordinate to "What We Build", so their headings step down rather than repeating the same 3rem three times in one section. */ .work-case .section-title { font-size: 2.3rem; } .work-case .section-title::after { width: 64px; height: 2px; } @media (max-width: 860px) { .work { padding: 4rem 0 0; } .work .hub { padding: 4.5rem 0 0; } .work .cai { padding: 4.5rem 0 80px; } .work-case .section-title { font-size: 1.9rem; } } .solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .solution-card { background: var(--gradient-dark); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; transition: all 0.3s ease; } .solution-card:hover { transform: translateY(-5px); border-color: var(--accent-green); box-shadow: 0 20px 40px rgba(0, 255, 136, 0.1); } .solution-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 0 20px var(--glow-green); } .solution-icon svg { width: 28px; height: 28px; color: var(--accent-green); } /* ─── Solution Icon Animations ──────────────────────────────── */ /* Clickable cursor on interactive cards */ .solution-card, .feature-card { cursor: pointer; } /* — AI Automation: block assembly — */ .icon-assemble .blk { opacity: 0; transition: none !important; transform-box: fill-box; transform-origin: center; } .icon-assemble .blk-tl { transform: translate(-4px, -4px) scale(0.5); } .icon-assemble .blk-tr { transform: translate(4px, -4px) scale(0.5); } .icon-assemble .blk-bl { transform: translate(-4px, 4px) scale(0.5); } .icon-assemble .blk-br { transform: translate(4px, 4px) scale(0.5); } @keyframes blockAssemble { to { opacity: 1; transform: translate(0, 0) scale(1); } } .icon-assemble.animate .blk-tl { animation: blockAssemble 0.45s 0.00s cubic-bezier(0.34, 1.5, 0.64, 1) forwards; } .icon-assemble.animate .blk-tr { animation: blockAssemble 0.45s 0.10s cubic-bezier(0.34, 1.5, 0.64, 1) forwards; } .icon-assemble.animate .blk-bl { animation: blockAssemble 0.45s 0.20s cubic-bezier(0.34, 1.5, 0.64, 1) forwards; } .icon-assemble.animate .blk-br { animation: blockAssemble 0.45s 0.30s cubic-bezier(0.34, 1.5, 0.64, 1) forwards; } /* — Website Creation: blinking prompt chevron — */ @keyframes promptBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .icon-code .prompt-chevron { animation: promptBlink 1.0s step-end infinite; } /* — Product Media: corner unfold — */ .solution-icon { position: relative; } .icon-media .media-frame { stroke-dasharray: 1; stroke-dashoffset: 1; transition: none !important; } .icon-media .media-content { opacity: 0; transition: none !important; } @keyframes unfoldFrame { to { stroke-dashoffset: 0; } } @keyframes fadeInContent { to { opacity: 1; } } .icon-media.animate .media-frame { animation: unfoldFrame 0.65s 0.00s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .icon-media.animate .media-content { animation: fadeInContent 0.25s 0.60s ease forwards; } .solution-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); font-weight: 700; letter-spacing: -0.3px; } .solution-card p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; } .solution-features { list-style: none; } .solution-features li { color: var(--text-secondary); margin-bottom: 0.5rem; position: relative; padding-left: 1.5rem; } .solution-features li::before { content: '▶'; color: var(--accent-green); position: absolute; left: 0; } /* Use Cases Section */ .use-cases { padding: 6rem 0; background: var(--gradient-dark); } .use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .use-case-card { background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 15px; padding: 1.5rem; transition: all 0.3s ease; backdrop-filter: blur(10px); } .use-case-card:hover { border-color: var(--accent-green); box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1); } .use-case-card h4 { font-family: 'Space Grotesk', sans-serif; color: var(--accent-green); margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.3px; } .use-case-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } /* Client card reveal */ .client-logo-mark { opacity: 0; transition: opacity 0.8s ease !important; } .client-logo-mark.logo-visible { opacity: 1; } /* Client name decode effect */ .char-decoding { color: var(--accent-green); text-shadow: 0 0 8px var(--glow-green), 0 0 18px var(--glow-green); display: inline-block; } .char-decoded { color: var(--text-primary); text-shadow: none; display: inline-block; } /* Clients Section */ .clients { padding: 6rem 0; background: var(--secondary-bg); } .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 2rem; justify-items: center; } .clients-grid .client-card { width: 100%; max-width: 480px; } .client-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .client-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-green); opacity: 0; transition: opacity 0.4s ease; } .client-card:hover { border-color: var(--accent-green); box-shadow: 0 20px 50px rgba(0, 255, 136, 0.12); transform: translateY(-6px); } .client-card:hover::before { opacity: 1; } .client-card-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .client-logo-mark { width: 48px; height: 48px; border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 12px; overflow: hidden; box-shadow: 0 0 20px var(--glow-green); flex-shrink: 0; } .client-logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .client-meta { flex: 1; min-width: 0; } .client-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; margin-bottom: 0.15rem; } .client-url { font-size: 0.8rem; color: var(--accent-green); text-decoration: none; opacity: 0.75; transition: opacity 0.3s ease; letter-spacing: 0.02em; } .client-url:hover { opacity: 1; text-shadow: 0 0 8px var(--glow-green); } .client-badge { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-green); background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.25); padding: 4px 10px; border-radius: 20px; flex-shrink: 0; } .client-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.5rem; font-weight: 300; } .client-services { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .client-services li { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 20px; padding: 4px 12px; transition: all 0.3s ease; } .client-card:hover .client-services li { border-color: rgba(0, 255, 136, 0.2); color: var(--text-primary); } /* About Section */ .about { padding: 6rem 0; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text p { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; } .stats { display: flex; gap: 2rem; margin-top: 2rem; } .stat { text-align: center; } .stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--accent-green); margin-bottom: 0.5rem; } .stat-label { color: var(--text-secondary); font-size: 0.9rem; } /* Testimonials Section */ .testimonials { padding: 6rem 0; background: var(--gradient-dark); } .testimonial-card { background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; text-align: center; max-width: 600px; margin: 0 auto 3rem; backdrop-filter: blur(10px); } .testimonial-card p { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 1.5rem; font-style: italic; } .testimonial-author { display: flex; flex-direction: column; align-items: center; } .author-name { color: var(--text-primary); font-weight: 600; margin-bottom: 0.25rem; } .author-title { color: var(--text-muted); font-size: 0.9rem; } .client-logos { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; } .logo-item { color: var(--text-muted); font-weight: 600; font-size: 1.1rem; opacity: 0.6; transition: all 0.3s ease; } .logo-item:hover { opacity: 1; color: var(--accent-green); } /* Contact Section */ .contact { padding: 6rem 0; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact-info p { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; } .contact-methods { display: flex; flex-direction: column; gap: 1rem; } .contact-method { display: flex; align-items: center; gap: 1rem; color: var(--text-secondary); } .method-icon { font-size: 1.2rem; } .contact-form { background: var(--gradient-dark); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group input, .form-group textarea { width: 100%; background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem; color: var(--text-primary); font-family: inherit; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 10px var(--glow-green); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } /* Footer */ .footer { background: var(--gradient-dark); border-top: 1px solid var(--border-color); padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .footer-brand p { color: var(--text-muted); font-style: italic; } .link-group h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; letter-spacing: -0.2px; } .link-group a { display: block; color: var(--text-secondary); text-decoration: none; margin-bottom: 0.5rem; transition: color 0.3s ease; } .link-group a:hover { color: var(--accent-green); } .newsletter h4 { color: var(--text-primary); margin-bottom: 1rem; } .newsletter-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .newsletter-form input { flex: 1; background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 5px; padding: 0.75rem; color: var(--text-primary); } .newsletter-form button { background: var(--gradient-primary); color: var(--primary-bg); border: none; border-radius: 5px; padding: 0.75rem 1rem; cursor: pointer; font-weight: 600; } .social-icons { display: flex; gap: 1rem; } .social-icon { width: 40px; height: 40px; background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; transition: all 0.3s ease; } .social-icon:hover, .social-icon:focus-visible { border-color: var(--accent-green); color: var(--accent-green); box-shadow: 0 0 10px var(--glow-green); } /* The glyph is a currentColor mask, so it picks up the hover colour above. .hd defaults to 1em; the circle is 40px, so it needs a size of its own. */ .social-icon .hd { width: 18px; height: 18px; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-color); color: var(--text-muted); } /* Responsive Design */ @media (max-width: 768px) { .hero-container { grid-template-columns: 1fr; text-align: center; } .hero-title { font-size: 2.5rem; } .about-content, .contact-content { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; } .stats { justify-content: center; } .hero-buttons { flex-direction: column; align-items: center; } .sync-diagram { width: 300px; height: 300px; } } /* Chatbot Widget Styles */ .chatbot-widget { position: fixed; bottom: 20px; right: 20px; z-index: 10000; font-family: 'Inter', sans-serif; } .chatbot-toggle { position: relative; width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0, 255, 136, 0.3); transition: all 0.3s ease; animation: chatbotFloat 3s ease-in-out infinite; } .chatbot-toggle:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 40px rgba(0, 255, 136, 0.4); } .chatbot-icon { width: 28px; height: 28px; color: var(--primary-bg); transition: all 0.3s ease; } .chatbot-pulse { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: var(--accent-green); border-radius: 50%; animation: pulse 2s infinite; } @keyframes chatbotFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } } .chatbot-window { position: absolute; bottom: 80px; right: 0; width: 380px; height: 500px; background: var(--primary-bg); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; overflow: hidden; backdrop-filter: blur(20px); } .chatbot-window.active { display: flex; animation: chatbotSlideIn 0.3s ease-out; } @keyframes chatbotSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .chatbot-header { background: var(--gradient-dark); border-bottom: 1px solid var(--border-color); padding: 1rem; display: flex; align-items: center; justify-content: space-between; } .chatbot-header-info { display: flex; align-items: center; gap: 0.75rem; } .chatbot-avatar { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--glow-green); } .avatar-icon { color: var(--primary-bg); font-weight: bold; font-size: 1.2rem; } .chatbot-title h4 { color: var(--text-primary); margin: 0; font-size: 1rem; font-weight: 600; } .chatbot-status { color: var(--accent-green); font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .chatbot-status::before { content: ''; width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--glow-green); } .chatbot-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .chatbot-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .chatbot-close svg { width: 16px; height: 16px; } .chatbot-messages { flex: 1; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; background: var(--primary-bg); } .chatbot-messages::-webkit-scrollbar { width: 4px; } .chatbot-messages::-webkit-scrollbar-track { background: var(--border-color); } .chatbot-messages::-webkit-scrollbar-thumb { background: var(--accent-green); border-radius: 2px; } .message { display: flex; flex-direction: column; max-width: 80%; animation: messageSlideIn 0.3s ease-out; } @keyframes messageSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .bot-message { align-self: flex-start; } .user-message { align-self: flex-end; } .message-content { background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 0.25rem; } .user-message .message-content { background: var(--gradient-primary); color: var(--text-primary); border: none; } .message-content p { margin: 0; color: var(--text-primary); font-size: 0.9rem; line-height: 1.4; } .user-message .message-content p { color: var(--text-primary); } .message-time { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; } .user-message .message-time { text-align: right; } .chatbot-input-area { border-top: 1px solid var(--border-color); padding: 1rem; background: var(--gradient-dark); } .chatbot-input-container { display: flex; gap: 0.5rem; align-items: center; } .chatbot-input-container input { flex: 1; background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 25px; padding: 0.75rem 1rem; color: var(--text-primary); font-size: 0.9rem; outline: none; transition: all 0.3s ease; } .chatbot-input-container input:focus { border-color: var(--accent-green); box-shadow: 0 0 10px var(--glow-green); } .chatbot-input-container input::placeholder { color: var(--text-muted); } .chatbot-send { width: 40px; height: 40px; background: var(--gradient-primary); border: none; border-radius: 50%; color: var(--primary-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 0 15px var(--glow-green); } .chatbot-send:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 20px var(--glow-green); } /* This rule already existed but was dead: nothing ever set the disabled attribute until the widget started locking during a reply. */ .chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } #chat-input:disabled { opacity: 0.55; cursor: not-allowed; } .chatbot-send svg { width: 18px; height: 18px; } .chatbot-typing { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.8rem; } .typing-indicator { display: flex; gap: 3px; } .typing-indicator span { width: 6px; height: 6px; background: var(--accent-green); border-radius: 50%; animation: typingDot 1.4s infinite ease-in-out; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes typingDot { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Mobile Responsive */ @media (max-width: 768px) { .chatbot-widget { bottom: 15px; right: 15px; } .chatbot-window { width: calc(100vw - 30px); height: 70vh; bottom: 80px; right: -15px; } .chatbot-toggle { width: 55px; height: 55px; } .chatbot-icon { width: 24px; height: 24px; } } /* ─── AI Gallery Section ─────────────────────────────────────── */ .ai-gallery { padding: 100px 0 80px; background: var(--secondary-bg); overflow: hidden; } .gallery-carousel-wrapper { position: relative; width: 100%; margin-top: 3rem; /* allow slides to bleed to screen edges */ padding: 0; } .gallery-swiper { width: 100%; padding-bottom: 52px !important; /* room for pagination */ overflow: visible; } .gallery-slide-inner { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; border: 1px solid var(--border-color); cursor: pointer; } .gallery-slide-inner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* dim non-active slides slightly */ .swiper-slide:not(.swiper-slide-active) .gallery-slide-inner { opacity: 0.6; transform: scale(0.97); transition: opacity 0.4s ease, transform 0.4s ease !important; } .swiper-slide-active .gallery-slide-inner { opacity: 1; transform: scale(1); box-shadow: 0 0 40px rgba(0, 255, 136, 0.15), 0 20px 60px rgba(0,0,0,0.6); border-color: rgba(0, 255, 136, 0.25); } /* hover zoom */ .gallery-slide-inner:hover img { transform: scale(1.05) !important; } /* green label overlay on hover */ .gallery-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.2rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.35s ease !important; } .gallery-slide-inner:hover .gallery-overlay { opacity: 1; } .gallery-overlay span { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-green); background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.3); padding: 4px 10px; border-radius: 20px; } /* Pagination dots */ .gallery-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 1; width: 6px; height: 6px; transition: all 0.3s ease !important; } .gallery-pagination .swiper-pagination-bullet-active { background: var(--accent-green); width: 24px; border-radius: 3px; box-shadow: 0 0 8px var(--glow-green); } /* Prev / Next buttons */ .gallery-btn-prev, .gallery-btn-next { color: var(--accent-green) !important; background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(0, 255, 136, 0.2) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; backdrop-filter: blur(6px); transition: all 0.3s ease !important; } .gallery-btn-prev:hover, .gallery-btn-next:hover { background: rgba(0, 255, 136, 0.1) !important; border-color: var(--accent-green) !important; box-shadow: 0 0 16px var(--glow-green) !important; } .gallery-btn-prev::after, .gallery-btn-next::after { font-size: 14px !important; font-weight: 700; } /* Watermark */ .gallery-watermark { position: absolute; bottom: 10px; right: 12px; font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255, 255, 255, 0.35); pointer-events: none; user-select: none; /* subtle text-shadow instead of a box — keeps it classy */ text-shadow: 0 1px 4px rgba(0,0,0,0.6); transition: color 0.3s ease !important; } .gallery-slide-inner:hover .gallery-watermark { color: rgba(0, 255, 136, 0.5); } /* "by Opsync" byline in section subtitle */ .gallery-byline { font-family: 'Space Grotesk', sans-serif; font-size: 0.8em; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-green); opacity: 0.75; } /* Mobile */ @media (max-width: 640px) { .gallery-btn-prev, .gallery-btn-next { display: none !important; } } /* ============================================================ FigiHome Command Center — flagship section (#hub) ============================================================ */ .hub { padding: 7rem 0; background: var(--primary-bg); position: relative; overflow: hidden; } .hub-glow { position: absolute; top: -10%; left: 50%; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.14) 0%, rgba(0, 255, 136, 0.05) 35%, transparent 70%); pointer-events: none; z-index: 0; } .hub .container { position: relative; z-index: 1; } .hub-eyebrow { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-green); margin-bottom: 1.1rem; } .hub-eyebrow::before { content: '— '; opacity: 0.6; } .hub .section-subtitle { max-width: 640px; margin: 0 auto; line-height: 1.6; } /* --- Icon system (mask-based line icons) --- */ .hd { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .hd-stats { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15v3'/%3E%3Cpath d='M12 10v8'/%3E%3Cpath d='M17 6v12'/%3E%3C/svg%3E"); } .hd-orders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); } .hd-cust { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E"); } .hd-fin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); } .hd-truck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='10' rx='1'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E"); } .hd-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.6 8.6 0 0 1-4-1L3 21l1.5-5.5A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E"); } .hd-bot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='11' rx='2'/%3E%3Cpath d='M12 8V5'/%3E%3Ccircle cx='12' cy='4' r='1'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M15 13h.01'/%3E%3C/svg%3E"); } .hd-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 21.4l8.8-8.7a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E"); } .hd-cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .hd-box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.3 7L12 12l8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); } .hd-ig { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.1'/%3E%3C/svg%3E"); } .hd-fb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); } .hd-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); } /* --- Centerpiece window --- */ .hub-showcase { max-width: 1000px; margin: 0 auto; } .hub-window { border: 1px solid rgba(0, 255, 136, 0.18); border-radius: 16px; background: linear-gradient(180deg, #0c0f0d 0%, #070807 100%); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 255, 136, 0.08); overflow: hidden; } .hub-winbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.015); } .hub-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; } .hub-dot:first-child { background: rgba(0, 255, 136, 0.5); } .hub-addr { margin: 0 auto; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; font-family: 'Space Grotesk', sans-serif; } .hub-demo { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-green); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 20px; padding: 3px 9px; } .hub-app { display: grid; grid-template-columns: 156px 1fr; } /* rail */ .hub-rail { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.012); } .hub-railbrand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.35em; font-size: 0.8rem; color: var(--text-primary); padding: 4px 10px 14px; } .hub-tab { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 0.82rem; font-family: inherit; text-align: left; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .hub-tab:hover:not(.is-active) { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); } .hub-tab .hd { width: 15px; height: 15px; opacity: 0.75; } .hub-tab.is-active { background: rgba(0, 255, 136, 0.1); color: var(--accent-green); font-weight: 500; } .hub-tab.is-active .hd { opacity: 1; } /* main */ .hub-main { padding: 20px 22px 24px; } .hub-mainhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .hub-viewtitle { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-primary); text-transform: uppercase; } .hub-chips { display: flex; gap: 6px; } .hub-chip { font-size: 0.66rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 20px; padding: 3px 10px; } .hub-chip.is-on { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.35); background: rgba(0, 255, 136, 0.06); } .hub-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .hub-kpi { border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; background: rgba(255, 255, 255, 0.02); } .hub-kpi-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; } .hub-kpi-val { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; } .hub-kpi-delta { display: block; margin-top: 8px; font-size: 0.68rem; color: var(--text-muted); } .hub-kpi-delta.up { color: var(--accent-green); } .hub-panels { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; } .hub-panel { border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; background: rgba(255, 255, 255, 0.02); } .hub-panel-title { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 14px; } .hub-bars { display: flex; align-items: flex-end; gap: 6px; height: 118px; } .hub-bars span { flex: 1; height: var(--h); background: linear-gradient(180deg, rgba(0, 255, 136, 0.55), rgba(0, 255, 136, 0.15)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: hubGrow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0ms); } .hub-bars span.is-peak { background: linear-gradient(180deg, var(--accent-green-bright), rgba(0, 255, 136, 0.45)); box-shadow: 0 0 16px var(--glow-green); } @keyframes hubGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .hub-donutpanel { display: flex; flex-direction: column; align-items: center; } .hub-donut { position: relative; width: 128px; height: 128px; margin: 2px auto 4px; } .hub-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } .hub-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3.4; } .hub-ring { fill: none; stroke: var(--accent-green); stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--glow-green)); animation: hubDraw 1.3s ease-out both; } @keyframes hubDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 25; } } .hub-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hub-donut-center b { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; color: var(--text-primary); } .hub-donut-center span { font-size: 0.66rem; color: var(--text-muted); } .hub-legend { list-style: none; display: flex; gap: 12px; margin-top: 8px; } .hub-legend li { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--text-secondary); } .hub-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-green); } .hub-legend i.mut { background: rgba(0, 255, 136, 0.45); } .hub-legend i.dim { background: rgba(255, 255, 255, 0.2); } /* interactive demo views */ .hub-view { display: none; } .hub-view.is-active { display: block; animation: hubViewIn 0.28s ease; } @keyframes hubViewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .hub-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .hub-mini-3 { grid-template-columns: repeat(3, 1fr); } .hub-minicard { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); } .hub-minicard b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; color: var(--text-primary); line-height: 1; } .hub-minicard span { display: block; font-size: 0.66rem; color: var(--text-muted); margin-top: 7px; } .hub-dotc { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .hub-list { display: flex; flex-direction: column; } .hub-lrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); } .hub-lrow:last-child { border-bottom: none; } .hub-lname { color: var(--text-primary); } .hub-chip2 { font-size: 0.6rem; padding: 1px 8px; border-radius: 20px; border: 1px solid; margin-left: 5px; white-space: nowrap; } .st-out, .st-crit { color: #ff7a6b; border-color: rgba(255, 122, 107, 0.55); } .st-crit { border-color: #ff7a6b; } .st-low { color: #e6c15c; border-color: rgba(230, 193, 92, 0.5); } .st-ok { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.4); } .st-mut { color: var(--text-muted); border-color: var(--border-color); } .tag-vvip { color: #c9a7ff; border-color: rgba(201, 167, 255, 0.5); } .tag-vip { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.4); } .tag-loyal { color: var(--text-muted); border-color: var(--border-color); } .tag-risk { color: #ff7a6b; border-color: rgba(255, 122, 107, 0.55); } .hub-hero { border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; background: rgba(0, 255, 136, 0.04); margin-bottom: 12px; } .hub-hero-v { font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--accent-green); margin-top: 6px; } .hub-pl .r { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--border-color); font-size: 0.82rem; color: var(--text-primary); } .hub-pl .r.neg { color: var(--text-muted); } .hub-pl .r.tot { border-bottom: none; font-weight: 700; } .hub-pl .pos { color: var(--accent-green); } .hub-drv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .hub-drvc { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 8px; background: rgba(255, 255, 255, 0.02); text-align: center; } .hub-drv-n { font-size: 0.78rem; color: var(--text-primary); font-weight: 500; } .hub-dn { position: relative; width: 72px; height: 72px; margin: 8px auto 6px; } .hub-dn svg { width: 100%; height: 100%; transform: rotate(-90deg); } .hub-dn b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; color: var(--text-primary); } .hub-drv-m { font-size: 0.66rem; color: var(--text-muted); } .hub-live { font-size: 0.8rem; color: var(--text-secondary); } .hub-chat { display: flex; flex-direction: column; gap: 10px; padding: 2px; } .hub-msg { max-width: 82%; padding: 10px 13px; border-radius: 12px; font-size: 0.8rem; line-height: 1.4; } .hub-msg.in { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-secondary); border-bottom-left-radius: 4px; } .hub-msg.bot { align-self: flex-end; background: var(--accent-green); color: #04150d; border-bottom-right-radius: 4px; } .hub-msg .ar { direction: rtl; display: block; } /* AI inbox — channel icons, sub-tabs, tickets */ .ch-ic { font-size: 0.95em; color: var(--accent-green); margin-right: 6px; vertical-align: -0.12em; } .hub-chip .ch-ic { margin-right: 5px; } .hub-subtabs { display: flex; gap: 8px; margin-bottom: 14px; } .hub-subtab { font: inherit; font-size: 0.72rem; color: var(--text-muted); background: none; border: 1px solid var(--border-color); border-radius: 20px; padding: 5px 13px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .hub-subtab:hover:not(.is-on) { color: var(--text-primary); } .hub-subtab.is-on { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.4); background: rgba(0, 255, 136, 0.06); } .hub-badge { display: inline-block; font-size: 0.6rem; background: var(--accent-green); color: #04150d; border-radius: 10px; padding: 0 6px; margin-left: 4px; font-weight: 600; } .hub-subview { display: none; } .hub-subview.is-active { display: block; } .hub-mini-btn { font-size: 0.66rem; color: var(--accent-green); border: 1px solid rgba(0, 255, 136, 0.4); border-radius: 6px; padding: 3px 11px; cursor: pointer; } /* ===== Customer AI section ===== */ .cai { position: relative; padding: 120px 0; overflow: hidden; } .cai-glow { position: absolute; top: -10%; right: -5%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 255, 136, 0.12) 0%, transparent 60%); pointer-events: none; } .cai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; } .cai-channels { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .cai-channels span { display: inline-flex; align-items: center; font-size: 0.9rem; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 100px; padding: 8px 16px; } .cai-caps { list-style: none; display: flex; flex-direction: column; gap: 18px; } .cai-caps li { position: relative; padding-left: 30px; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.5; } .cai-caps li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-green); font-weight: 700; } .cai-caps li b { color: var(--text-primary); font-weight: 600; } /* brand-matched widget (rendered in the CLIENT's brand, not OpSync's) */ .cai-right { display: flex; flex-direction: column; align-items: center; } .cai-widget { width: 100%; max-width: 380px; background: #f3f3f0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 255, 136, 0.08); border: 1px solid #1f3a2e; } .cw-head { display: flex; align-items: center; gap: 12px; background: #141516; color: #fff; padding: 16px 18px; } .cw-head .cw-avatar { width: 40px; height: 40px; border-radius: 50%; background: #f3f3f0; color: #141516; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); } /* online pip, so the header reads as a live agent rather than a logo chip */ .cw-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #35d07f; margin-right: 6px; vertical-align: 1px; } .cw-head b { display: block; font-size: 0.95rem; } .cw-head span { font-size: 0.72rem; color: #a9aaa6; } .cw-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; background: #f3f3f0; } .cw-msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 0.86rem; line-height: 1.42; unicode-bidi: plaintext; } .cw-msg.in { align-self: flex-end; background: #e3e3de; color: #141516; border-bottom-right-radius: 4px; } .cw-msg.bot { align-self: flex-start; background: #141516; color: #fff; border-bottom-left-radius: 4px; } .cw-input { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-top: 1px solid #e3e3de; color: #8a8a86; font-size: 0.86rem; } .cw-send { width: 32px; height: 32px; border-radius: 50%; background: #141516; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .cw-send svg { width: 15px; height: 15px; } .cai-note { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--text-muted); } @media (max-width: 860px) { .cai { padding: 80px 0; } .cai-grid { grid-template-columns: 1fr; gap: 40px; } .cai-right { order: -1; } } .hub-caption { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 1.25rem; font-weight: 300; } /* --- Capability index --- */ .hub-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 2.5rem; margin-top: 4.5rem; } .hub-mod { padding: 1.6rem 0; border-top: 1px solid var(--border-color); transition: border-color 0.3s ease; } .hub-mod .hd { width: 22px; height: 22px; color: var(--accent-green); margin-bottom: 0.85rem; opacity: 0.9; } .hub-mod h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.45rem; letter-spacing: -0.01em; } .hub-mod p { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); font-weight: 300; max-width: 40ch; } .hub-mod:hover { border-color: rgba(0, 255, 136, 0.4); } .hub-mod:hover .hd { opacity: 1; text-shadow: 0 0 10px var(--glow-green); } /* --- Integration strip --- */ .hub-stack { margin-top: 4rem; text-align: center; } .hub-stack-label { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.1rem; } .hub-stack ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; } .hub-stack li { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 24px; padding: 7px 16px; transition: all 0.3s ease; } .hub-stack li:hover { border-color: var(--accent-green); color: var(--text-primary); } /* --- Safe facts --- */ .hub-facts { margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3.5rem; } .hub-fact { text-align: center; } .hub-fact b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--accent-green); letter-spacing: -0.03em; line-height: 1; } .hub-fact span { display: block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); } /* --- Client card CTA --- */ .client-cta { display: inline-block; margin-top: 1.4rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--accent-green); text-decoration: none; letter-spacing: 0.01em; transition: text-shadow 0.3s ease; } .client-cta:hover { text-shadow: 0 0 10px var(--glow-green); } /* --- Responsive --- */ @media (max-width: 820px) { .hub-kpis { grid-template-columns: repeat(2, 1fr); } .hub-panels { grid-template-columns: 1fr; } } @media (max-width: 680px) { .hub { padding: 5rem 0; } .hub-app { grid-template-columns: 1fr; } .hub-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-color); gap: 4px; padding: 12px; } .hub-railbrand { display: none; } .hub-tab { white-space: nowrap; padding: 7px 12px; } .hub-main { padding: 16px; } .hub-kpi-val { font-size: 1.3rem; } .hub-fact b { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { .hub-bars span { animation: none; } .hub-ring { animation: none; } } @media (prefers-reduced-motion: reduce) { .logo-wordmark::after { animation: none; } .navbar, .nav-link, .nav-cta-btn, .nav-toggle-bar, .nav-menu, .nav-menu::before { transition-duration: 0.01ms; } } /* ============================================================ Customer AI case study (#customer-ai) Reuses the .hub-* demo component vocabulary; only the pieces that did not already exist are defined here. ============================================================ */ /* --- New icons for the capability index --- */ .hd-img { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); } .hd-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E"); } .hd-hand { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v5'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-4 0v7'/%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-4 0v9'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8'/%3E%3C/svg%3E"); } .hd-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); } .hd-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); } .hd-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } /* --- Outcome band --- */ .cai-proof { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem 2.5rem; } .cai-stat { display: flex; flex-direction: column; border-top: 1px solid var(--border-color); padding-top: 1.25rem; } .cai-stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2.9rem; font-weight: 700; color: var(--accent-green); letter-spacing: -0.03em; line-height: 1; } .cai-stat b i { font-style: normal; font-size: 1.05rem; font-weight: 500; color: var(--text-muted); margin: 0 0.18em; letter-spacing: 0; } .cai-stat-l { display: block; margin-top: 0.85rem; flex: 1; font-size: 0.92rem; color: var(--text-primary); font-weight: 500; line-height: 1.4; } .cai-stat-n { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); font-weight: 300; line-height: 1.5; } .cai-disclaimer { margin-top: 1.75rem; font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); max-width: 68ch; border-top: 1px solid var(--border-color); padding-top: 1rem; } /* --- Left column intro --- */ .cai-h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; text-wrap: balance; } .cai-lede { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.65; font-weight: 300; margin-bottom: 1.75rem; max-width: 52ch; } /* --- Section sub-headings --- */ .cai-subhead { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: 0.9rem; } .cai-mods { margin-top: 2rem; } /* --- Control room --- */ .cai-cc { margin-top: 6rem; } .cai-cc-head { max-width: 60ch; margin-bottom: 2.75rem; } .cai-cc-lede { color: var(--text-secondary); font-size: 1rem; line-height: 1.65; font-weight: 300; } .cai-cc .hub-main { padding: 20px 22px 24px; } .cai-cc-panels { margin-top: 2px; } .cai-cc-foot { margin-top: 0.9rem; font-size: 0.72rem; color: var(--text-muted); } .cai-tk-acts { display: inline-flex; gap: 6px; flex: none; } /* topic bars */ .cai-tp { display: flex; flex-direction: column; gap: 11px; } .cai-tprow { display: grid; grid-template-columns: 13ch 1fr 4ch; align-items: center; gap: 10px; font-size: 0.74rem; color: var(--text-secondary); } .cai-tpbar { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .cai-tpbar i { display: block; height: 100%; border-radius: 4px; background: var(--accent-green); opacity: 0.65; } .cai-tprow:first-child .cai-tpbar i { opacity: 1; box-shadow: 0 0 12px var(--glow-green); } .cai-tpn { font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; color: var(--text-primary); text-align: right; } /* --- Closing --- */ .cai-close { margin-top: 6rem; } .cai-close-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem 3rem; } .cai-close-grid p { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); font-weight: 300; border-top: 1px solid var(--border-color); padding-top: 1.25rem; text-wrap: pretty; } .cai-close-grid b { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 0.5rem; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.01em; } @media (max-width: 860px) { .cai-proof { gap: 1.75rem; } .cai-stat b { font-size: 2.4rem; } .cai-cc, .cai-close { margin-top: 4rem; } .cai-cc-panels { grid-template-columns: 1fr; } .cai-tprow { grid-template-columns: 11ch 1fr 4ch; font-size: 0.68rem; } /* Let a ticket row stack rather than dropping an action off the page. */ .cai-cc .hub-lrow { flex-wrap: wrap; gap: 8px 0; } .cai-cc .hub-lrow .hub-lname { flex: 1 1 100%; } } @media (max-width: 560px) { /* Four stat cards across is unreadable on a phone; scoped to this demo so the operations-hub demo above keeps its own layout. */ .cai-cc .hub-mini { grid-template-columns: repeat(2, 1fr); } .cai-cc .hub-minicard b { font-size: 1.2rem; } .cai-stat b { font-size: 2.15rem; } } /* ============================================================ Light-speed jump — hero "View services" + the two demo nav links ============================================================ */ .warp { position: fixed; inset: -40px; z-index: 1200; pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.10) 0%, rgba(0, 0, 0, 0.82) 38%, #000 72%); transition: opacity 0.34s ease, visibility 0s linear 0.34s; } .warp.is-on { opacity: 1; visibility: visible; transition: opacity 0.16s ease, visibility 0s; } .warp-field { position: absolute; inset: 0; overflow: hidden; contain: strict; } /* the whole overlay shakes, so it reads as the camera rather than the streaks */ .warp.is-on { animation: warpShake 1.05s cubic-bezier(0.3, 0.05, 0.2, 1) both; } @keyframes warpShake { 0% { transform: translate3d(0, 0, 0); } 7% { transform: translate3d(-9px, 6px, 0); } 14% { transform: translate3d(8px, -7px, 0); } 21% { transform: translate3d(-7px, -5px, 0); } 29% { transform: translate3d(6px, 7px, 0); } 37% { transform: translate3d(-5px, 4px, 0); } 45% { transform: translate3d(5px, -4px, 0); } 54% { transform: translate3d(-4px, -3px, 0); } 64% { transform: translate3d(3px, 3px, 0); } 74% { transform: translate3d(-2px, 2px, 0); } 85% { transform: translate3d(2px, -1px, 0); } 100% { transform: translate3d(0, 0, 0); } } /* one streak: a thin line pinned to the centre, rotated out to its own angle, then flung from --r0 to --r1 while it stretches. */ .warp-streak { position: absolute; left: 50%; top: 50%; width: var(--len); height: var(--thick); margin-top: calc(var(--thick) / -2); transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--col) 55%, #fff); opacity: 0; } .warp.is-on .warp-streak { /* will-change only while flying: holding ~190 promoted layers for the life of the page costs more than it buys and is its own source of jank. */ will-change: transform, opacity; animation: warpShoot var(--dur) cubic-bezier(0.35, 0, 0.15, 1) var(--delay) both; } @keyframes warpShoot { 0% { transform: rotate(var(--ang)) translateX(var(--r0)) scaleX(0.06); opacity: 0; } 12% { opacity: 0.75; } 22% { transform: rotate(var(--ang)) translateX(calc(var(--r0) + (var(--r1) - var(--r0)) * 0.10)) scaleX(0.3); opacity: 1; } 45% { transform: rotate(var(--ang)) translateX(calc(var(--r0) + (var(--r1) - var(--r0)) * 0.34)) scaleX(0.62); opacity: 1; } 70% { transform: rotate(var(--ang)) translateX(calc(var(--r0) + (var(--r1) - var(--r0)) * 0.68)) scaleX(0.88); opacity: 0.8; } 88% { opacity: 0.32; } 100% { transform: rotate(var(--ang)) translateX(var(--r1)) scaleX(1); opacity: 0; } } /* the arrival flash */ .warp-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(0, 255, 136, 0.42) 14%, transparent 40%); opacity: 0; } .warp.is-on .warp-flash { animation: warpFlash 0.95s ease-out both; } @keyframes warpFlash { 0% { opacity: 0; transform: scale(0.22); } 30% { opacity: 0.55; transform: scale(0.7); } 52% { opacity: 0.9; transform: scale(1); } 76% { opacity: 0.4; transform: scale(1.24); } 100% { opacity: 0; transform: scale(1.55); } } /* The page itself shakes with the overlay: an effect that rattles while the site behind it sits still reads as a sticker, not a camera. */ body.is-warping #shake, body.is-warping .navbar { animation: warpShakePage 1.05s cubic-bezier(0.3, 0.05, 0.2, 1) both; will-change: transform; } @keyframes warpShakePage { /* Translate ONLY. #shake is the full page height, so a scale here would pivot about its centre and throw content hundreds of px out near the top and bottom. The <=9px gap a translate can expose at the viewport edge is invisible against the black ground under a dimmed overlay. */ 0% { transform: translate3d(0, 0, 0); } 7% { transform: translate3d(-9px, 6px, 0); } 14% { transform: translate3d(8px, -7px, 0); } 21% { transform: translate3d(-7px, -5px, 0); } 29% { transform: translate3d(6px, 7px, 0); } 37% { transform: translate3d(-5px, 4px, 0); } 45% { transform: translate3d(5px, -4px, 0); } 54% { transform: translate3d(-4px, -3px, 0); } 64% { transform: translate3d(3px, 3px, 0); } 74% { transform: translate3d(-2px, 2px, 0); } 85% { transform: translate3d(2px, -1px, 0); } 100% { transform: translate3d(0, 0, 0); } } } /* the demo the jump lands on gets a brief edge-glow so the arrival has a target */ .warp-target { animation: warpArrive 1.1s ease-out; } @keyframes warpArrive { 0% { box-shadow: 0 0 0 1px var(--accent-green), 0 0 70px 6px var(--glow-green); } 100% { box-shadow: 0 0 0 1px transparent, 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { /* no jump, no streaks, no shake — the link still works, it just arrives */ .warp, .warp.is-on { display: none; animation: none; } body.is-warping #shake, body.is-warping .navbar { animation: none; } .warp-target { animation: none; } } /* --- "View services": the hover previews the jump it triggers --- */ .btn-warp { display: inline-flex; align-items: center; gap: 0.55rem; overflow: hidden; isolation: isolate; } .btn-warp .bw-label { position: relative; z-index: 2; } .btn-warp .bw-arrow { position: relative; z-index: 2; width: 17px; height: 17px; flex: none; transform: translateX(-2px); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .btn-warp:hover .bw-arrow, .btn-warp:focus-visible .bw-arrow { transform: translateX(4px); } /* the green fill arrives faster than the shared .btn-secondary default */ .btn-warp::before { transition: left 0.34s cubic-bezier(0.16, 1, 0.3, 1); } /* a beam of light crossing the button, the same idea as the jump itself */ .btn-warp::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent); transform: translate3d(-140%, 0, 0) skewX(-18deg); opacity: 0; will-change: transform; pointer-events: none; } .btn-warp:hover::after, .btn-warp:focus-visible::after { animation: bwSweep 0.66s cubic-bezier(0.3, 0, 0.1, 1); } @keyframes bwSweep { 0% { transform: translate3d(-140%, 0, 0) skewX(-18deg); opacity: 0; } 14% { opacity: 0.95; } 100% { transform: translate3d(460%, 0, 0) skewX(-18deg); opacity: 0; } } .btn-warp:hover { box-shadow: 0 10px 34px var(--glow-green), 0 0 0 1px var(--accent-green-bright); } .btn-warp:active { transform: translateY(-1px) scale(0.985); } @media (prefers-reduced-motion: reduce) { .btn-warp .bw-arrow { transition: none; } .btn-warp:hover .bw-arrow, .btn-warp:focus-visible .bw-arrow { transform: translateX(-2px); } .btn-warp:hover::after, .btn-warp:focus-visible::after { animation: none; } } /* ========================================================================== Flagship build 3 — the money module (#money) Reuses the hub demo chrome (.hub-window/.hub-rail/.hub-view), so the tab wiring in script.js picks this window up with no JS change. Only the contents of the four views are new. ========================================================================== */ .mny { position: relative; padding-top: 6rem; } /* The three claims, stated before the demo so the screens have a point. */ .mny-claims { margin: 2.5rem 0 3.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem 2.5rem; } .mny-claim { border-top: 1px solid var(--border-color); padding-top: 1.25rem; } .mny-claim-k { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--accent-green); } .mny-claim h3 { margin: 0.6rem 0 0.55rem; font-family: 'Space Grotesk', sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); } .mny-claim p { font-size: 0.93rem; line-height: 1.7; font-weight: 300; color: var(--text-secondary); text-wrap: pretty; } /* A line of plain English under each demo view, explaining what it just showed. */ .mny-note { margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.6; font-weight: 300; color: var(--text-muted); text-wrap: pretty; } .mny-note b { color: var(--text-secondary); font-weight: 500; } /* Money position table */ .mny-pos { display: flex; flex-direction: column; } .mny-prow { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: 0.7rem 2px; border-bottom: 1px solid var(--border-color); font-size: 0.84rem; color: var(--text-primary); } .mny-prow:last-child { border-bottom: none; } .mny-pn small { display: block; margin-top: 0.25rem; font-size: 0.7rem; color: var(--text-muted); } .mny-prow b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; } /* The uncounted account: a dash, never a zero. */ .mny-prow.is-dash b { color: var(--text-muted); font-weight: 400; padding-right: 0.15rem; } .mny-prow.is-tot { border-top: 1px solid rgba(0, 255, 136, 0.35); border-bottom: none; padding-top: 0.9rem; } .mny-prow.is-tot b { color: var(--accent-green); font-size: 1.05rem; font-weight: 700; } /* Receipt scan: the paper on the left, the fields it read on the right */ .mny-rcp { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; } .mny-paper { position: relative; min-height: 190px; border-radius: 10px; border: 1px solid var(--border-color); background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 11px), rgba(255, 255, 255, 0.02); } .mny-paper span { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-family: 'Space Grotesk', sans-serif; font-size: 0.6rem; letter-spacing: 0.28em; color: var(--text-muted); } .mny-fields { display: flex; flex-direction: column; gap: 0.4rem; } .mny-f { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline; border: 1px solid var(--border-color); border-radius: 9px; padding: 0.5rem 0.75rem; font-size: 0.8rem; } .mny-f u { text-decoration: none; color: var(--text-muted); font-size: 0.72rem; } .mny-f b { color: var(--text-primary); font-weight: 500; font-family: 'Space Grotesk', sans-serif; } /* Only the fields the scan was unsure of are put in front of a human. */ .mny-f.is-ask { border-color: rgba(0, 255, 136, 0.45); background: rgba(0, 255, 136, 0.05); } .mny-f.is-ask b, .mny-f.is-ask u { color: var(--accent-green); } /* Generated double-entry ledger */ .mny-led { display: flex; flex-direction: column; } .mny-lrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: baseline; padding: 0.55rem 2px; border-bottom: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-primary); } .mny-lrow:last-child { border-bottom: none; } .mny-lrow i { font-style: normal; color: var(--text-muted); font-size: 0.75rem; } .mny-lrow b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; } .mny-lrow b.pos { color: var(--accent-green); } .mny-lrow b.neg { color: var(--text-muted); } @media (max-width: 860px) { .mny { padding-top: 4rem; } .mny-claims { margin: 2rem 0 2.5rem; gap: 1.5rem; } .mny-rcp { grid-template-columns: 1fr; } .mny-paper { min-height: 90px; } .mny-f { grid-template-columns: 6.5rem 1fr; } /* Three ledger columns will not fit a phone; drop the account name under the label. */ .mny-lrow { grid-template-columns: 1fr auto; } .mny-lrow i { grid-column: 1 / -1; margin-top: -0.3rem; } } /* ========================================================================== 2026-09 repositioning: OpSync as the operating system for e-commerce brands. New sections only. Written phone-first: the base rules are the phone layout, min-width queries add the wider ones. Logical properties throughout so the Arabic (dir="rtl") version mirrors without overrides. ========================================================================== */ /* The eyebrow used to open with an em dash in generated content. No em dashes in public copy, so a short rule does the same job. */ .hub-eyebrow::before { content: ''; display: inline-block; width: 1.1em; height: 1px; margin-inline-end: 0.6em; vertical-align: middle; background: currentColor; opacity: 0.6; } /* --- Language switch --------------------------------------------------- */ .lang-toggle { position: relative; z-index: 2; min-height: 40px; padding: 0.35rem 0.95rem; margin-inline-start: auto; margin-inline-end: 0.75rem; border: 1px solid rgba(0, 255, 136, 0.35); border-radius: 999px; background: transparent; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; cursor: pointer; } .lang-toggle:hover, .lang-toggle:focus-visible { border-color: var(--accent-green); color: var(--accent-green); } .lang-toggle:focus-visible, .intent-chip:focus-visible, .faq-item summary:focus-visible, .mod-more:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 3px; } /* --- Arabic typography --------------------------------------------------- */ /* Display: Alexandria, a geometric Arabic with real weight contrast, named for the city, which matches Space Grotesk's engineered feel. Text: Readex Pro, a clean low-contrast Arabic that stays readable at 15px on a phone. Cairo/Tajawal were rejected as the default look of every Egyptian site. */ html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: 'Readex Pro', 'Inter', sans-serif; } html[lang="ar"] .section-title, html[lang="ar"] .hero-title, html[lang="ar"] .intent-title, html[lang="ar"] .cai-subhead, html[lang="ar"] .cai-h3, html[lang="ar"] .hub-mod h4, html[lang="ar"] .mod-card h3, html[lang="ar"] .pk-name, html[lang="ar"] .how-step h3, html[lang="ar"] .mny-claim h3, html[lang="ar"] .nav-link, html[lang="ar"] .nav-cta-btn, html[lang="ar"] .btn-primary, html[lang="ar"] .btn-secondary, html[lang="ar"] .hub-eyebrow, html[lang="ar"] .hero-eyebrow, html[lang="ar"] .mod-tag, html[lang="ar"] .pk-badge, html[lang="ar"] .faq-item summary, html[lang="ar"] .problem-q, html[lang="ar"] button { font-family: 'Alexandria', 'Space Grotesk', sans-serif; } .lang-toggle { font-family: 'Alexandria', 'Inter', sans-serif; } html[lang="ar"] .hero-title { font-weight: 800; } html[lang="ar"] .hero-title-v2 .title-line.glow { font-weight: 500; } html[lang="ar"] .section-title { font-weight: 700; } html[lang="ar"] .problem-q { font-weight: 400; line-height: 1.75; } html[lang="ar"] .hero-subtitle, html[lang="ar"] .section-subtitle { line-height: 1.85; font-weight: 300; } html[lang="ar"] .hero-title, html[lang="ar"] .section-title { letter-spacing: 0; line-height: 1.3; } html[lang="ar"] .hub-eyebrow, html[lang="ar"] .hero-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; } /* The warp arrow and "see more" arrows point forward, which is left in Arabic. */ html[dir="rtl"] .bw-arrow { transform: scaleX(-1); } /* Demo windows are English product screenshots; keep their text reading left to right. */ html[dir="rtl"] .hub-showcase .hub-caption { direction: rtl; } /* --- Hero ------------------------------------------------------------------ */ .hero-eyebrow { display: inline-block; margin-bottom: 1.4rem; padding: 0.4rem 1rem; border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 999px; color: var(--accent-green); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .hero-title.hero-title-v2 { font-size: clamp(2.4rem, 7.2vw, 5.2rem); max-width: 16ch; margin-inline: auto; } .hero-title-v2 .title-line.glow { color: var(--accent-green); font-weight: 400; } /* --- Intent selector ------------------------------------------------------ */ .intent { padding: 3.5rem 0 1rem; background: var(--primary-bg); } .intent-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 600; text-align: center; margin-bottom: 1.5rem; } .intent-chips { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 980px; margin-inline: auto; } .intent-chip { display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.8rem 1.1rem; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(255, 255, 255, 0.02); color: var(--text-primary); font-size: 0.98rem; text-decoration: none; text-align: start; } .intent-chip .hd { width: 20px; height: 20px; color: var(--accent-green); flex-shrink: 0; } .intent-chip:hover { border-color: rgba(0, 255, 136, 0.55); background: rgba(0, 255, 136, 0.06); } /* --- Problem, in the owner's words --------------------------------------- */ .problem { padding: 5rem 0; background: var(--primary-bg); } .problem-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .problem-q { margin: 0; padding: 1.4rem 1.5rem; border-inline-start: 2px solid var(--accent-green); background: rgba(255, 255, 255, 0.025); border-radius: 4px 14px 14px 4px; color: var(--text-primary); font-size: 1.05rem; line-height: 1.55; font-weight: 400; } html[dir="rtl"] .problem-q { border-radius: 14px 4px 4px 14px; } .problem-close { margin-top: 2.5rem; text-align: center; color: var(--accent-green); font-size: 1.1rem; font-weight: 500; } /* --- The system: module grid --------------------------------------------- */ .system { padding: 5rem 0 6rem; background: var(--secondary-bg); } .system .section-subtitle, .packages .section-subtitle, .kyc .section-subtitle, .clients .section-subtitle { max-width: 640px; margin-inline: auto; line-height: 1.6; } .mod-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .mod-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem; border: 1px solid var(--border-color); border-radius: 18px; background: linear-gradient(160deg, rgba(0, 255, 136, 0.035), rgba(255, 255, 255, 0.01) 45%); scroll-margin-top: 96px; } .mod-card:hover, .mod-card:target { border-color: rgba(0, 255, 136, 0.5); } .mod-card:target { box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.4), 0 0 40px -10px var(--glow-green); } .mod-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; } .mod-top .hd { width: 24px; height: 24px; color: var(--accent-green); } .mod-num { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.1em; } .mod-tag { margin-inline-start: auto; padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(0, 255, 136, 0.12); color: var(--accent-green); font-size: 0.74rem; font-weight: 600; } .mod-tag-muted { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); } .mod-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; margin-bottom: 0.2rem; } .mod-q { color: var(--accent-green); font-size: 1rem; margin-bottom: 1rem; } .mod-list { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.2rem; } .mod-list li { position: relative; padding-inline-start: 1.2rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; } .mod-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); opacity: 0.8; } .mod-more { margin-top: auto; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-green); font-size: 0.92rem; font-weight: 500; text-decoration: none; } .mod-more::after { content: '→'; margin-inline-start: 0.4rem; transition: transform 0.25s ease; } html[dir="rtl"] .mod-more::after { content: '←'; } .mod-more:hover::after { transform: translateX(3px); } html[dir="rtl"] .mod-more:hover::after { transform: translateX(-3px); } .mod-project { background: rgba(255, 255, 255, 0.015); border-style: dashed; } /* --- Customers in depth ---------------------------------------------------- */ .kyc { position: relative; padding: 5rem 0; overflow: hidden; } .kyc-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } .kyc-points { margin-top: 0; } .kyc-profile { position: relative; padding: 1.3rem; border: 1px solid rgba(0, 255, 136, 0.25); border-radius: 18px; background: rgba(8, 14, 11, 0.9); box-shadow: 0 30px 60px -30px rgba(0, 255, 136, 0.25); text-align: left; } .kyc-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; } .kyc-head b { display: block; font-size: 1rem; } .kyc-head span:not(.hub-chip2):not(.kyc-avatar) { font-size: 0.8rem; color: var(--text-muted); } .kyc-head .hub-chip2 { margin-left: auto; font-size: 0.7rem; } .kyc-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: rgba(0, 255, 136, 0.15); color: var(--accent-green); font-weight: 600; } .kyc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.1rem; } .kyc-stats div { padding: 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); } .kyc-stats b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .kyc-stats span { font-size: 0.75rem; color: var(--text-muted); } .kyc-timeline { display: grid; gap: 0.1rem; } .kyc-ev { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-secondary); } .kyc-ev .hd { width: 16px; height: 16px; color: var(--accent-green); flex-shrink: 0; } .kyc-ev span { flex: 1; } .kyc-ev em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); } .kyc-ev.is-note span { color: #e6c15c; } .kyc-demo { margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-align: right; } /* --- Packages -------------------------------------------------------------- */ .packages { padding: 5.5rem 0; background: var(--secondary-bg); } .pk-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: stretch; } .pk-card { position: relative; display: flex; flex-direction: column; padding: 2rem 1.5rem 1.6rem; border: 1px solid var(--border-color); border-radius: 20px; background: rgba(255, 255, 255, 0.02); } .pk-card.is-featured { border-color: rgba(0, 255, 136, 0.55); background: linear-gradient(170deg, rgba(0, 255, 136, 0.09), rgba(0, 0, 0, 0) 55%); box-shadow: 0 0 50px -20px var(--glow-green); } .pk-badge { position: absolute; top: -0.8rem; inset-inline-start: 1.5rem; padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--gradient-green); color: #04120a; font-size: 0.75rem; font-weight: 600; } .pk-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 0.3rem; } .pk-for { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.3rem; } .pk-list { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.6rem; } .pk-list li { position: relative; padding-inline-start: 1.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); } .pk-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent-green); font-weight: 700; } .pk-list li.pk-inherit { color: var(--text-muted); font-size: 0.88rem; } .pk-list li.pk-inherit::before { content: '+'; } .pk-cta { margin-top: auto; text-align: center; min-height: 48px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .pk-note { margin-top: 2rem; text-align: center; color: var(--text-secondary); font-size: 0.95rem; } .pk-note a { color: var(--accent-green); } /* --- How it works ---------------------------------------------------------- */ .how { padding: 5.5rem 0; background: var(--primary-bg); } .how-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; counter-reset: none; } .how-step { padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 16px; background: rgba(255, 255, 255, 0.02); } .how-n { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: var(--accent-green); line-height: 1; margin-bottom: 0.8rem; } .how-step h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; } .how-step p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } /* --- Proof ------------------------------------------------------------------ */ .client-logo-light { background: #ffffff; } .client-logo-light img { object-fit: contain; padding: 4px; } .proof-more { margin-top: 2rem; text-align: center; color: var(--text-secondary); } .clients-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } /* --- FAQ -------------------------------------------------------------------- */ .faq { padding: 5.5rem 0; background: var(--secondary-bg); } .faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 0.7rem; } .faq-item { border: 1px solid var(--border-color); border-radius: 14px; background: rgba(255, 255, 255, 0.02); } .faq-item[open] { border-color: rgba(0, 255, 136, 0.4); } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0.9rem 1.2rem; cursor: pointer; font-weight: 500; font-size: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; flex-shrink: 0; color: var(--accent-green); font-size: 1.4rem; line-height: 1; transition: transform 0.25s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding: 0 1.2rem 1.2rem; color: var(--text-secondary); line-height: 1.65; font-size: 0.95rem; } /* --- Contact ----------------------------------------------------------------- */ .contact-cal { margin-bottom: 1.2rem; } .contact-or { font-size: 0.92rem; } .contact-methods a { color: var(--text-secondary); text-decoration: none; } .contact-methods a:hover { color: var(--accent-green); } .contact-method .hd.method-icon { width: 20px; height: 20px; color: var(--accent-green); } .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); } .form-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; } .form-group select { width: 100%; min-height: 50px; background: rgba(26, 26, 46, 0.5); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.8rem 1rem; color: var(--text-primary); font: inherit; } .form-group select:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 10px var(--glow-green); } .form-group select option { background: #0a0a0a; } .form-group input, .form-group textarea { font-size: 1rem; } html[dir="rtl"] .form-group input[dir="ltr"] { text-align: right; } /* --- Wider screens --------------------------------------------------------- */ @media (min-width: 640px) { .intent-chips { grid-template-columns: repeat(2, 1fr); } .problem-grid { grid-template-columns: repeat(2, 1fr); } .how-steps { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .intent-chips { grid-template-columns: repeat(3, 1fr); } .problem-grid { grid-template-columns: repeat(3, 1fr); } .mod-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .mod-wide { grid-column: span 2; } .mod-wide .mod-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; } .pk-grid { grid-template-columns: repeat(3, 1fr); } .how-steps { grid-template-columns: repeat(4, 1fr); } .kyc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; } .kyc-points { grid-template-columns: 1fr 1fr; } .system, .packages, .how, .faq { padding: 7rem 0; } .kyc { padding: 7rem 0; } } /* --- Fixes from the preview ------------------------------------------------ */ /* The wordmark is a Latin logo: its trailing dot must not jump sides in Arabic. */ .logo-wordmark { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Anchor jumps land below the fixed bar, not under it. */ section[id], .work-case[id], .mod-card[id] { scroll-margin-top: 84px; } @media (min-width: 640px) { .mod-grid { grid-template-columns: repeat(2, 1fr); } .mod-wide { grid-column: span 2; } } @media (min-width: 900px) { .mod-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Motion, ported from the nilex-site study (vanilla, no GSAP): blur-up reveals with a stagger, a rising hero, the demo window opening from an inset frame, and gradient-fill hover on the module cards. Everything reveals ONCE and is off under prefers-reduced-motion. ========================================================================== */ :root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-inout: cubic-bezier(0.87, 0, 0.13, 1); } html.js [data-rv] { opacity: 0; transform: translateY(34px); filter: blur(8px); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } html.js [data-rv].in { opacity: 1; transform: none; filter: none; } /* Blur is the expensive part on a mid-range phone; keep the rise, drop the blur. */ @media (max-width: 640px) { html.js [data-rv] { filter: none; transform: translateY(24px); } } html.js .rv-window { clip-path: inset(12% 7% 12% 7% round 24px); transition: clip-path 1.6s var(--ease-inout), box-shadow 0.4s ease; } html.js .rv-window.in { clip-path: inset(0 0 0 0 round 14px); } /* Hero: each line rises out of a blur, then the deck and buttons follow. */ @keyframes opsRise { from { opacity: 0; transform: translateY(0.55em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } html.js .hero-eyebrow, html.js .hero-title-v2 .title-line, html.js .hero .hero-subtitle, html.js .hero .hero-buttons { animation: opsRise 1.2s var(--ease-out) both; } html.js .hero-eyebrow { animation-delay: 0.05s; } html.js .hero-title-v2 .title-line:nth-child(1) { animation-delay: 0.15s; } html.js .hero-title-v2 .title-line:nth-child(2) { animation-delay: 0.32s; } html.js .hero .hero-subtitle { animation-delay: 0.55s; } html.js .hero .hero-buttons { animation-delay: 0.7s; } /* Module cards: a green wash fades up from the corner on hover, the card lifts. */ .mod-card { overflow: hidden; isolation: isolate; } .mod-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(0, 255, 136, 0.16), transparent 60%); opacity: 0; transition: opacity 0.6s var(--ease-out); } html[dir="rtl"] .mod-card::before { background: radial-gradient(120% 90% at 100% 0%, rgba(0, 255, 136, 0.16), transparent 60%); } @media (hover: hover) { .mod-card, .pk-card, .how-step { transition: transform 0.5s var(--ease-out), border-color 0.4s ease, box-shadow 0.5s ease; } .mod-card:hover, .pk-card:hover, .how-step:hover { transform: translateY(-6px); } .mod-card:hover::before { opacity: 1; } .pk-card:hover { box-shadow: 0 24px 50px -30px var(--glow-green); } } @media (prefers-reduced-motion: reduce) { html.js [data-rv], html.js .rv-window { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } html.js .hero-eyebrow, html.js .hero-title-v2 .title-line, html.js .hero .hero-subtitle, html.js .hero .hero-buttons { animation: none; } .mod-card:hover, .pk-card:hover, .how-step:hover { transform: none; } } /* ========================================================================== 2026-09-18 simplification (Designjoy-style single scroll): hero + live demo, 3 outcomes, 3 steps, brand strip, 4 FAQs, contact. ========================================================================== */ .hero.hero-simple { min-height: 0; display: block; padding: 8.5rem 0 4rem; background: radial-gradient(ellipse 90% 60% at 50% 38%, rgba(0, 255, 136, 0.18) 0%, rgba(0, 255, 136, 0.05) 40%, #000000 72%); } .hero-simple .hero-content { margin-bottom: 3rem; } .hero-simple .hero-subtitle { margin-bottom: 2rem; } .hero-simple .hero-buttons { justify-content: center; } .hero-note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--text-muted); } .hero-demo { position: relative; z-index: 2; } .hero-demo .hub-stack { margin-top: 2.5rem; } html.js .hero-note { animation: opsRise 1.2s var(--ease-out) 0.8s both; } /* What you get */ .outcomes { padding: 5.5rem 0; background: var(--secondary-bg); } .out-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .out-card { padding: 1.8rem 1.5rem; border: 1px solid var(--border-color); border-radius: 18px; background: linear-gradient(160deg, rgba(0, 255, 136, 0.04), rgba(255, 255, 255, 0.01) 50%); } .out-card .hd { width: 26px; height: 26px; color: var(--accent-green); margin-bottom: 1.1rem; } .out-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin-bottom: 1rem; } .out-card ul { list-style: none; display: grid; gap: 0.6rem; } .out-card li { position: relative; padding-inline-start: 1.4rem; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.5; } .out-card li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent-green); font-weight: 700; } .out-also { margin-top: 2rem; text-align: center; color: var(--text-muted); font-size: 0.95rem; } html[lang="ar"] .out-card h3 { font-family: 'Alexandria', 'Space Grotesk', sans-serif; } @media (hover: hover) { .out-card { transition: transform 0.5s var(--ease-out), border-color 0.4s ease; } .out-card:hover { transform: translateY(-6px); border-color: rgba(0, 255, 136, 0.45); } } /* Three steps */ .how-3 .how-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; background: rgba(0, 255, 136, 0.12); border: 1px solid rgba(0, 255, 136, 0.4); } /* Brand strip */ .brands { padding: 3.5rem 0; background: var(--primary-bg); border-block: 1px solid var(--border-color); } .brands-title { text-align: center; color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.4rem; } .brands-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; } .brand-chip { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 52px; padding: 0.5rem 1.1rem 0.5rem 0.5rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-primary); text-decoration: none; font-weight: 500; } html[dir="rtl"] .brand-chip { padding: 0.5rem 0.5rem 0.5rem 1.1rem; } .brand-chip:hover { border-color: rgba(0, 255, 136, 0.5); } .brand-chip img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .brand-chip img.on-light { background: #fff; object-fit: contain; padding: 3px; } /* Contact + footer */ .contact-simple .contact-cal { margin-bottom: 1.6rem; } .footer-simple { padding: 2.5rem 0; } .footer-simple-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: 0.9rem; } .footer-simple-row .logo-wordmark { color: var(--text-primary); font-size: 1.3rem; } .footer-copy { margin-top: 1.2rem; color: var(--text-muted); font-size: 0.8rem; } @media (min-width: 640px) { .how-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .out-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .outcomes { padding: 7rem 0; } .hero.hero-simple { padding-top: 10rem; } .how-3 { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { html.js .hero-note { animation: none; } .out-card:hover { transform: none; } } /* ========================================================================== 2026-09-18 v3: "too simple" → each outcome is a row with its own mockup, and the AI photo gallery is back. Still one short scroll. ========================================================================== */ .feat-rows { display: grid; gap: 4.5rem; } .feat-row { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } .feat-text .hd { width: 28px; height: 28px; color: var(--accent-green); margin-bottom: 1rem; } .feat-text h3 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem; letter-spacing: -0.01em; } html[lang="ar"] .feat-text h3 { font-family: 'Alexandria', 'Space Grotesk', sans-serif; letter-spacing: 0; line-height: 1.4; } .feat-text ul { list-style: none; display: grid; gap: 0.75rem; } .feat-text li { position: relative; padding-inline-start: 1.6rem; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.55; } .feat-text li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent-green); font-weight: 700; } .feat-visual { min-width: 0; } .feat-visual .hub-showcase { margin: 0; } .out-also a { color: var(--accent-green); } /* Driver phone mockup */ .phone-wrap { display: flex; justify-content: center; } .phone { width: 290px; max-width: 100%; padding: 2.4rem 0.9rem 1.2rem; border-radius: 38px; background: #0b0f0d; border: 1px solid #1f3a2e; box-shadow: 0 0 0 8px #151a18, 0 40px 80px -30px rgba(0, 255, 136, 0.35); position: relative; text-align: left; font-size: 0.82rem; } .phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 84px; height: 18px; border-radius: 12px; background: #151a18; } .ph-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.8rem; padding: 0 0.3rem; } .ph-top b { font-size: 1.05rem; } .ph-top span { color: var(--text-muted); } .ph-cash { display: grid; padding: 0.85rem 0.9rem; margin-bottom: 0.8rem; border-radius: 14px; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); } .ph-cash span { color: var(--text-secondary); font-size: 0.75rem; } .ph-cash b { font-size: 1.35rem; color: var(--accent-green); font-variant-numeric: tabular-nums; } .ph-cash em { font-style: normal; color: var(--text-muted); font-size: 0.72rem; } .ph-order { padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); } .ph-o-head { display: flex; gap: 0.5rem; align-items: baseline; } .ph-o-head span { color: var(--text-muted); flex: 1; } .ph-o-head em { font-style: normal; font-variant-numeric: tabular-nums; } .ph-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.6rem; } .ph-btns span { text-align: center; padding: 0.4rem 0.2rem; border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.7rem; color: var(--text-secondary); } .ph-btns span.ok { background: var(--accent-green); border-color: transparent; color: #04120a; font-weight: 600; } .ph-state { margin-top: 0.35rem; font-size: 0.72rem; } .ph-state.ok { color: var(--accent-green); } .ph-state.warn { color: #e6c15c; } .ph-order.is-done { opacity: 0.75; } /* Customer profile + chat side by side */ .duo { display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; } .duo .kyc-profile, .duo .cai-widget { width: 100%; max-width: 380px; } @media (min-width: 900px) { .feat-rows { gap: 6.5rem; } .feat-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } .feat-row.is-flip .feat-text { order: 2; } .duo { grid-template-columns: 1fr 1fr; align-items: start; } .duo .cai-widget { margin-top: 2.5rem; } } .duo .kyc-stats b { font-size: 0.95rem; white-space: nowrap; } .duo .kyc-stats div { padding: 0.6rem 0.5rem; } /* Chat nudge: a speech bubble above the chat button, once per visit. */ .chat-nudge { position: absolute; bottom: 74px; right: 0; display: flex; align-items: flex-start; gap: 0.2rem; width: max-content; max-width: min(260px, calc(100vw - 40px)); padding: 0.75rem 0.5rem 0.75rem 1rem; border-radius: 16px 16px 4px 16px; background: #ffffff; color: #0a0a0a; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 136, 0.35); animation: nudgeIn 0.5s var(--ease-out, ease) both; } .chat-nudge[hidden] { display: none; } .chat-nudge::after { content: ''; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px; background: #ffffff; transform: rotate(45deg); border-radius: 2px; } .chat-nudge-text { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: 500 0.92rem/1.4 'Inter', sans-serif; text-align: start; } html[lang="ar"] .chat-nudge-text { font-family: 'Readex Pro', 'Inter', sans-serif; } .chat-nudge-close { flex: none; width: 28px; height: 28px; margin-top: -4px; background: none; border: 0; cursor: pointer; color: #777; font-size: 1.2rem; line-height: 1; } .chat-nudge-close:hover { color: #000; } .chat-nudge-text:focus-visible, .chat-nudge-close:focus-visible { outline: 2px solid #00b86b; outline-offset: 2px; border-radius: 4px; } @keyframes nudgeIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .chat-nudge { animation: none; } } /* ========================================================================== 2026-09-23 motion + features pass: aurora behind the demo, a self-touring demo, intent chips, the returns calculator, the step rail, scroll progress and a pointer glow on cards. Phone styles first; min-width adds the rest. ========================================================================== */ /* Scroll progress hairline */ .scroll-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1001; height: 2px; background: var(--accent-green); box-shadow: 0 0 10px var(--glow-green); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; } /* Aurora: two soft green fields drift behind the hero demo */ .hero-demo::before { content: ''; position: absolute; inset: 6% -8% 30%; z-index: -1; background: radial-gradient(40% 55% at 25% 40%, rgba(0, 255, 136, 0.22), transparent 70%), radial-gradient(35% 50% at 78% 60%, rgba(0, 200, 255, 0.10), transparent 70%); filter: blur(40px); animation: opsAurora 16s var(--ease-inout) infinite alternate; pointer-events: none; } @keyframes opsAurora { 0% { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(3%, -3%, 0) scale(1.08); opacity: 1; } 100% { transform: translate3d(5%, 2%, 0) scale(0.96); opacity: 0.8; } } /* Self-touring demo: the lit tab carries a bar that fills until the next tab */ .hub-tab { position: relative; } .hub-window.is-touring .hub-tab.is-active::after { content: ''; position: absolute; inset-inline: 10px; inset-block-end: 3px; height: 2px; border-radius: 2px; background: var(--accent-green); transform-origin: 0 50%; animation: opsTour 3.4s linear both; } @keyframes opsTour { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Intent chips */ .need { margin-top: 2.5rem; text-align: center; } .need-q { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1rem; } .need-chips { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 980px; margin-inline: auto; } .need-chip { display: flex; align-items: center; gap: 0.75rem; min-height: 52px; padding: 0.75rem 1.1rem; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(255, 255, 255, 0.02); color: var(--text-primary); text-decoration: none; text-align: start; font-size: clamp(0.95rem, 2.6vw, 1rem); font-weight: 500; transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s var(--ease-out); } .need-chip .hd { width: 20px; height: 20px; color: var(--accent-green); flex-shrink: 0; } .need-chip::after { content: '↓'; margin-inline-start: auto; color: var(--accent-green); transition: transform 0.4s var(--ease-out); } .need-chip:hover, .need-chip:focus-visible { border-color: rgba(0, 255, 136, 0.55); background: rgba(0, 255, 136, 0.06); } .need-chip:hover::after { transform: translateY(3px); } .need-chip:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 3px; } html[lang="ar"] .need-chip, html[lang="ar"] .need-q { font-family: 'Readex Pro', 'Inter', sans-serif; } /* The outcome row a chip jumped to glows once */ .feat-row { scroll-margin-block: 90px; } .feat-row.is-picked .hub-window { animation: opsPicked 1.6s var(--ease-out) both; } @keyframes opsPicked { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 30% { box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.7), 0 0 60px -10px var(--glow-green); } } /* Returns calculator */ .leak { padding: 5.5rem 0; background: var(--primary-bg); } .leak-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1040px; margin-inline: auto; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 22px; background: linear-gradient(160deg, rgba(0, 255, 136, 0.05), rgba(255, 255, 255, 0.01) 55%); } .leak-inputs { display: grid; gap: 1.4rem; } .leak-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; color: var(--text-secondary); font-size: 0.95rem; } .leak-field output { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text-primary); font-variant-numeric: tabular-nums; } .leak-field input[type="range"] { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; } .leak-field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--accent-green) var(--fill), rgba(255, 255, 255, 0.1) var(--fill)); } .leak-field input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); } .leak-field input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent-green); } .leak-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-green); box-shadow: 0 0 0 0 var(--glow-green); transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out); } .leak-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-green); } .leak-field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(0, 255, 136, 0.15); } .leak-field input[type="range"]:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; border-radius: 6px; } /* The track fills from the start edge; under RTL the browser flips the thumb, so flip the fill too */ html[dir="rtl"] .leak-field input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--accent-green) var(--fill), rgba(255, 255, 255, 0.1) var(--fill)); } .leak-out { display: flex; flex-direction: column; } .leak-big { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .leak-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent-green); text-shadow: 0 0 40px var(--glow-green); font-variant-numeric: tabular-nums; } .leak-big > span { color: var(--text-secondary); font-size: 1.1rem; font-weight: 500; } .leak-big-label { margin-top: 0.5rem; color: var(--text-primary); font-size: 1.05rem; } .leak-facts { list-style: none; display: grid; gap: 0.5rem; margin: 1.4rem 0; padding-block-start: 1.2rem; border-block-start: 1px solid var(--border-color); } .leak-facts li { display: flex; align-items: baseline; gap: 0.6rem; color: var(--text-secondary); font-size: 0.95rem; } .leak-facts b { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 4.5ch; } .leak-note { color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; margin-bottom: 1.4rem; } .leak-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; margin-top: auto; } .leak-ctas > * { width: 100%; justify-content: center; text-align: center; min-height: 48px; } html[lang="ar"] .leak-field label, html[lang="ar"] .leak-big-label, html[lang="ar"] .leak-facts li, html[lang="ar"] .leak-note { font-family: 'Readex Pro', 'Inter', sans-serif; } /* How it works: a rail that fills, and numbers that light up in order */ .how-rail { display: none; } .how-3 .how-n { transition: background 0.5s ease, color 0.5s ease, box-shadow 0.6s ease; } #how .is-lit .how-step .how-n { background: var(--accent-green); color: #000; box-shadow: 0 0 0 6px rgba(0, 255, 136, 0.12), 0 0 24px var(--glow-green); } #how .is-lit .how-step:nth-child(2) .how-n { transition-delay: 0.55s; } #how .is-lit .how-step:nth-child(3) .how-n { transition-delay: 1.1s; } /* Pointer glow on cards */ [data-spot] { position: relative; isolation: isolate; } .how-step[data-spot], .brand-chip[data-spot] { overflow: hidden; } [data-spot]::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 255, 136, 0.13), transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } @media (hover: hover) { [data-spot]:hover::after { opacity: 1; } } @media (min-width: 640px) { .need-chips { grid-template-columns: repeat(3, 1fr); } .how-rail { display: block; position: relative; height: 2px; margin: 0 16.66% 1.6rem; background: rgba(255, 255, 255, 0.08); border-radius: 2px; } .how-rail span { position: absolute; inset: 0; border-radius: inherit; background: var(--accent-green); box-shadow: 0 0 12px var(--glow-green); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--ease-inout); } html[dir="rtl"] .how-rail span { transform-origin: 100% 50%; } #how .is-lit .how-rail span { transform: scaleX(1); } } @media (min-width: 900px) { .leak { padding: 7rem 0; } .leak-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; padding: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .hero-demo::before, .feat-row.is-picked .hub-window { animation: none; } .hub-window.is-touring .hub-tab.is-active::after { display: none; } .how-rail span, .how-3 .how-n { transition: none; } .need-chip, .need-chip::after { transition: none; } }