/* ============================================================================ Reference (finapay.ai handover) stylesheets — VERBATIM, scoped to html[data-surface="marketing"]. Loaded as its OWN from src/routes/__root.tsx (imported with ?url), on purpose: it must bypass the Tailwind/Lightning CSS pipeline that processes styles.css — that optimizer rewrites the reference CSS (e.g. it dropped the unprefixed `backdrop-filter`, which broke every glass surface). Vite's plain CSS pipeline only inlines these @imports and leaves the rules untouched. raw/*.css are byte-identical copies of the reference assets/css/*.css; the *.scoped.css twins are generated by `bun scripts/scope-ref-css.ts`. Import order = the reference order. rtl.css is loaded on every page (every rule is [dir="rtl"]-prefixed, so it is inert under LTR). ============================================================================ *//* GENERATED by scripts/scope-ref-css.ts from src/styles/ref/raw/main.css — DO NOT EDIT. Reference stylesheet, verbatim, scoped to html[data-surface="marketing"]. */ /* ========================================================= FINA - Liquid Glassmorphic Theme Light canvas. Cyan accent. Glass surfaces. Atmospheric. ========================================================= */ @property --border-angle { syntax: ""; initial-value: 0deg; inherits: false; } html[data-surface="marketing"] { /* ---------- Canvas (light) ---------- */ --canvas-base: #FFFFFF; --ambient-cyan:radial-gradient(ellipse 60% 50% at 20% 30%, rgba(223, 255, 146, 0.16), transparent 60%); --ambient-violet:radial-gradient(ellipse 50% 40% at 80% 70%, rgba(94, 107, 246, 0.10), transparent 60%); --ambient-teal:radial-gradient(ellipse 55% 45% at 90% 28%, transparent, transparent 65%); --noise: url("data:image/svg+xml;utf8,"); /* ---------- Glass surfaces (more transparent for stronger glassmorphism) ---------- */ --glass-bg: rgba(255, 255, 255, 0.38); --glass-bg-hover: rgba(255, 255, 255, 0.55); --glass-bg-elev: rgba(255, 255, 255, 0.62); --glass-border: rgba(15, 23, 42, 0.06); --glass-border-top: rgba(255, 255, 255, 0.95); --glass-blur: 28px; --glass-blur-elev: 44px; --glass-saturate: 190%; /* ---------- Accent (indigo primary) ---------- */ --accent:#DFFF92; --accent-2:#CDFF55; --accent-glow: color-mix(in oklab, var(--accent) 30%, transparent); /* ---------- Brand palette ---------- */ --lime:#5E6BF6; --lime-soft:#E2E5FD; --lime-deep:#282D6B; --ink:#000000; --ink-2:#0D0D0D; --ink-3:#1A1A1A; --violet:#DFFF92; --violet-soft:#CDFF55; --violet-bg:#F4FAE5; /* ---------- Selection ---------- */ --selection-bg:#5E6BF6; --selection-fg:#000000; /* ---------- Shimmer-border (animated card/nav border shine) ---------- */ --shimmer-color:rgb(223, 255, 146); --bg: #FFFFFF; --bg-soft: #F6F7F9; --bg-tint: #F1F2F6; --text:#000000; --text-2: #4A5163; --text-3: #8A92A6; --hairline: #E6E8EE; /* ---------- Typography (Bricolage brand) ---------- */ --font-display:'Bricolage Grotesque', 'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-sans:'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --tracking-display: -0.025em; --tracking-body: 0; --tracking-small: 0.02em; --weight-hero: 600; --weight-body: 400; /* ---------- Layout ---------- */ --container: 1240px; --container-narrow: 1080px; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --r-pill: 999px; --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* ---------- Shadows (light) ---------- */ --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(15, 23, 42, 0.04) inset, 0 12px 30px -12px rgba(15, 23, 42, 0.14), 0 24px 48px -24px rgba(15, 23, 42, 0.10); --shadow-card: var(--shadow-glass); --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(15, 23, 42, 0.04) inset, 0 30px 60px -20px rgba(15, 23, 42, 0.22), 0 12px 24px -12px rgba(15, 23, 42, 0.14); --shadow-pop:0 20px 40px -12px rgba(223, 255, 146, 0.28); --shadow-glow-cyan: 0 0 60px -8px var(--accent-glow); --lime-glow: color-mix(in oklab, var(--lime) 45%, transparent); } /* ========================================================= Reset + base ========================================================= */ html[data-surface="marketing"] *,html[data-surface="marketing"] *::before,html[data-surface="marketing"] *::after { box-sizing: border-box; } html[data-surface="marketing"],html[data-surface="marketing"] body { margin: 0; padding: 0; } html[data-surface="marketing"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; background: var(--canvas-base); /* Prevent horizontal scroll site-wide. body alone isn't enough on iOS Safari when fixed/transformed elements (mobile drawer, nav) sit beyond the viewport. */ overflow-x: hidden; } html[data-surface="marketing"] body { font-family: var(--font-sans); color: var(--text); font-size: 16px; line-height: 1.55; font-feature-settings: "ss01", "ss02", "cv11"; overflow-x: hidden; max-width: 100vw; background: var(--ambient-cyan), var(--ambient-violet), var(--ambient-teal), var(--canvas-base); background-attachment: fixed; min-height: 100vh; position: relative; } /* Noise overlay above ambient washes, below content */ html[data-surface="marketing"] body::before { content: ""; position: fixed; inset: 0; background-image: var(--noise); background-repeat: repeat; pointer-events: none; z-index: 1; opacity: 1; } html[data-surface="marketing"] img,html[data-surface="marketing"] svg,html[data-surface="marketing"] video { display: block; max-width: 100%; } html[data-surface="marketing"] button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; } html[data-surface="marketing"] a { color: inherit; text-decoration: none; } html[data-surface="marketing"] input,html[data-surface="marketing"] textarea,html[data-surface="marketing"] select { font: inherit; color: inherit; } /* ---------- Text selection ---------- */ html[data-surface="marketing"] ::selection { background: var(--selection-bg); color: var(--selection-fg); } html[data-surface="marketing"] ::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); } /* Lenis */ html[data-surface="marketing"].lenis { height: auto; } html[data-surface="marketing"].lenis.lenis-smooth { scroll-behavior: auto; } html[data-surface="marketing"].lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } html[data-surface="marketing"].lenis.lenis-stopped { overflow: hidden; } /* ========================================================= Atmosphere: orb-field ========================================================= */ html[data-surface="marketing"] .orb-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html[data-surface="marketing"] .orb { position: absolute; border-radius: 50%; filter: blur(56px); opacity: 0.45; mix-blend-mode: multiply; will-change: transform; /* GPU promotion hints — keep orb compositing off the CPU, especially on Safari/Mac */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } html[data-surface="marketing"] .orb--cyan { width: 520px; height: 520px; left: -120px; top: -120px; background: radial-gradient(circle,rgba(223, 255, 146,.75)0,rgba(223, 255, 146,.3) 35%,transparent 70%); animation: drift-cyan 22s ease-in-out infinite; } html[data-surface="marketing"] .orb--violet { width: 480px; height: 480px; right: -100px; top: 20%; background: radial-gradient(circle,rgba(94, 107, 246,.65)0,rgba(94, 107, 246,.25) 35%,transparent 70%); animation: drift-violet 28s ease-in-out infinite; } html[data-surface="marketing"] .orb--teal { width: 560px; height: 560px; left: 30%; bottom: -160px; background: radial-gradient(circle,rgba(0, 0, 0,.55)0,rgba(0, 0, 0,.22) 35%,transparent 70%); animation: drift-teal 32s ease-in-out infinite; display: none; } html[data-surface="marketing"] .orb--pink { width: 420px; height: 420px; right: 15%; bottom: 10%; background: radial-gradient(circle, rgba(244,114,182,0.50) 0%, rgba(244,114,182,0.20) 35%, transparent 70%); animation: drift-pink 26s ease-in-out infinite; } @keyframes drift-cyan { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40vw, 30vh) scale(1.15); } 66% { transform: translate(10vw, 60vh) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } } @keyframes drift-violet { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-30vw, 20vh) scale(1.1); } 66% { transform: translate(-10vw, 50vh) scale(0.95); } 100% { transform: translate(0, 0) scale(1); } } @keyframes drift-teal { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20vw, -30vh) scale(0.85); } 66% { transform: translate(-15vw, -10vh) scale(1.2); } 100% { transform: translate(0, 0) scale(1); } } @keyframes drift-pink { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-25vw, -40vh) scale(1.05); } 66% { transform: translate(20vw, -20vh) scale(0.9); } 100% { transform: translate(0, 0) scale(1); } } /* ---------- Performance: cut the heaviest GPU work on small/mid screens ---------- Orbs (huge blurred blended layers), fixed-attachment body gradients, deep glass blur, and the noise overlay dominate frame cost on phones. Visual delta is minimal at these sizes; the win is large. */ @media (max-width: 900px) { html[data-surface="marketing"] .orb { display: none; } html[data-surface="marketing"] body { background-attachment: scroll; } html[data-surface="marketing"] body::before { display: none; } html[data-surface="marketing"] { --glass-blur: 12px; --glass-blur-elev: 18px; --glass-saturate: 140%; } } /* Desktop: pink orb adds little, costs a full blurred layer */ @media (min-width: 901px) { html[data-surface="marketing"] .orb--pink { display: none; } } @media (max-width: 640px) { html[data-surface="marketing"] .orb { filter: blur(40px); opacity: 0.4; } } /* ========================================================= GPU promotion hints — combat Safari/Mac compositor jank on transformed/animated surfaces. Cheap on other browsers. ========================================================= */ html[data-surface="marketing"] .values__card,html[data-surface="marketing"] .path__card,html[data-surface="marketing"] .faq__item,html[data-surface="marketing"] .step,html[data-surface="marketing"] .pcard,html[data-surface="marketing"] .bcard,html[data-surface="marketing"] .integ,html[data-surface="marketing"] [data-tilt],html[data-surface="marketing"] [data-tilt-3d],html[data-surface="marketing"] .nav__neon,html[data-surface="marketing"] .nav__neon-comet,html[data-surface="marketing"] .hero__visual,html[data-surface="marketing"] .anim-frame,html[data-surface="marketing"] .anim-frame iframe { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ========================================================= Liquid-glass shine border (cards + nav) ========================================================= */ @keyframes rotate-border { to { --border-angle: 360deg; } } /* Light-theme shimmer-border animation: a soft radial glow sweeps diagonally across the border ring (back and forth) instead of a rotating conic spot. Tuned for white/glass cards with the brand indigo as the shine color. */ @keyframes shimmer-border { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* Reusable utility — apply via ::before/::after on any positioned card. Stacked drop-shadow filters give the moving shine spot a neon halo that bleeds outside the card border (visible on cards with overflow:visible). */ html[data-surface="marketing"] .glass-shine,html[data-surface="marketing"] .shimmer-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1.5px; background-image: radial-gradient(transparent 0%,transparent 30%,var(--shimmer-color, #DFFF92) 50%,transparent 70%,transparent 100%); background-size: 283% 283%; background-position: 153% 174%; animation: shimmer-border 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 1.5px rgba(223, 255, 146,.1); filter: drop-shadow(0 0 8px rgba(223, 255, 146,.29)); } /* ========================================================= Custom cursor (dot + lagging ring) ========================================================= */ html[data-surface="marketing"] .cursor-dot,html[data-surface="marketing"] .cursor-ring { display: none; position: fixed; top: 0; left: 0; pointer-events: none; transform: translate(-50%, -50%); will-change: transform; } html[data-surface="marketing"] .cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: #000000; box-shadow: 0 0 8px rgba(15,23,42,.35),0 0 24px rgba(223, 255, 146,.4),0 0 48px rgba(223, 255, 146,.2); z-index: 10000; transition: width 200ms, height 200ms, background 200ms; -webkit-backface-visibility: hidden; backface-visibility: hidden; } html[data-surface="marketing"] .cursor-ring { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); border: 1.5px solid rgba(15, 23, 42, 0.40); box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px -4px rgba(15, 23, 42, 0.18); z-index: 9999; transition: width 300ms, height 300ms, border-color 250ms, background 250ms; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Custom cursor disabled per request — keep classes for backwards compatibility but render nothing and don't hide the native cursor. */ html[data-surface="marketing"] .cursor-dot,html[data-surface="marketing"] .cursor-ring { display: none !important; } /* ========================================================= Typography ========================================================= */ html[data-surface="marketing"] .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 500; } /* Canonical Fina star — the 4-point concave sparkle from the wordmark (the sparkle above the N in /assets/images/logo.png). */ html[data-surface="marketing"] .eyebrow .star { width: 14px; height: 14px; flex: 0 0 14px; display: inline-block; background: var(--lime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; align-self: center; filter: drop-shadow(0 0 6px var(--lime-glow)); } html[data-surface="marketing"] h1,html[data-surface="marketing"] h2,html[data-surface="marketing"] h3,html[data-surface="marketing"] h4 { font-family: var(--font-display); font-weight: var(--weight-hero); letter-spacing: var(--tracking-display); line-height: 1.04; margin: 0; color: var(--ink); text-wrap: balance; } html[data-surface="marketing"] h1 { font-size: clamp(44px, 6.6vw, 72px); letter-spacing: -0.04em; font-weight: 600; } html[data-surface="marketing"] h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.035em; font-weight: 600; } html[data-surface="marketing"] h3 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; } html[data-surface="marketing"] h4 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; } html[data-surface="marketing"] .display-accent { color: var(--ink); font-style: normal; font-weight: 600; } html[data-surface="marketing"] .accent { color: var(--ink); } html[data-surface="marketing"] .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); line-height: 1.5; max-width: 56ch; text-wrap: pretty; } /* ========================================================= Layout ========================================================= */ html[data-surface="marketing"] .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; } html[data-surface="marketing"] .container--narrow { max-width: var(--container-narrow); } html[data-surface="marketing"] .section { padding: clamp(64px, 7vw, 110px) 0; position: relative; z-index: 2; } html[data-surface="marketing"] .section--tight { padding: clamp(48px, 5vw, 80px) 0; } html[data-surface="marketing"] .section--ink { background: var(--ink); color: #fff; } html[data-surface="marketing"] .section--ink h1,html[data-surface="marketing"] .section--ink h2,html[data-surface="marketing"] .section--ink h3 { color: #fff; } html[data-surface="marketing"] .section--soft { background: var(--bg-soft); } html[data-surface="marketing"] .section-head { text-align: center; margin: 0 auto 48px; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 18px; } html[data-surface="marketing"] .section-head .eyebrow { margin-bottom: 4px; } html[data-surface="marketing"] .section-head .lead { text-align: center; margin: 0 auto; } @media (max-width: 700px) { html[data-surface="marketing"] .container { padding: 0 20px; } html[data-surface="marketing"] .section { padding: 80px 0; } html[data-surface="marketing"] .section-head { margin-bottom: 44px; } } /* ========================================================= Buttons (pill, glass) ========================================================= */ html[data-surface="marketing"] .btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--r-pill); font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; transition: transform .35s var(--ease-out), background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; white-space: nowrap; position: relative; isolation: isolate; border: 1px solid transparent; overflow: hidden; } /* Corner shines + top-edge sheen — static glass highlight */ html[data-surface="marketing"] .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(60% 120% at 0% 0%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.35), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 30%); mix-blend-mode: screen; opacity: 0.85; transition: opacity .25s ease; } html[data-surface="marketing"] .btn:hover::before { opacity: 1; } /* Sweeping sheen on hover */ html[data-surface="marketing"] .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; pointer-events: none; z-index: -1; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: translateX(0); transition: transform .9s var(--ease-out); mix-blend-mode: screen; opacity: 0; } html[data-surface="marketing"] .btn:hover::after { opacity: 1; transform: translateX(420%); } /* Primary + lime CTA = indigo pill, white text */ html[data-surface="marketing"] .btn--primary,html[data-surface="marketing"] .btn--lime { background: var(--accent); color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.3),inset 0-1px 0 rgba(15,23,42,.2),0 6px 16px -8px rgba(223, 255, 146,.25); } html[data-surface="marketing"] .btn--primary:hover,html[data-surface="marketing"] .btn--lime:hover { background: var(--accent); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.38),inset 0-1px 0 rgba(15,23,42,.2),0 14px 30px -10px rgba(15,23,42,.3); font-weight: 600; } /* Radiating CTA — pulsing halo to make the primary hero action eye-catching (LP1 "make it radiating / more prominent"). */ html[data-surface="marketing"] .btn--radiate { animation: ctaRadiate 2.6s ease-in-out infinite; } @keyframes ctaRadiate { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3),inset 0-1px 0 rgba(15,23,42,.2),0 6px 16px -8px rgba(223, 255, 146,.25),0 0 0 0 rgba(223, 255, 146,.45); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3),inset 0-1px 0 rgba(15,23,42,.2),0 6px 22px -6px rgba(223, 255, 146,.34),0 0 0 12px transparent; } } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .btn--radiate { animation: none; } } /* Nav "Get Started" CTA — glossy sheen removed per request. */ html[data-surface="marketing"] .nav__actions .btn--lime::after { display: none; } /* Ink = dark navy pill, white text */ html[data-surface="marketing"] .btn--ink { background: var(--ink); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 6px 14px -8px rgba(15, 23, 42, 0.5); } html[data-surface="marketing"] .btn--ink::before { background: radial-gradient(60% 120% at 0% 0%, rgba(255, 255, 255, 0.30), transparent 55%), radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 35%); } html[data-surface="marketing"] .btn--ink:hover { background: #1c2335; transform: translateY(-1px); } /* Ghost = glass-white pill on light canvas */ html[data-surface="marketing"] .btn--ghost { background: rgba(255, 255, 255, 0.45); color: var(--text); border-color: rgba(15, 23, 42, 0.10); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(15, 23, 42, 0.06), 0 6px 16px -10px rgba(15, 23, 42, 0.18); } html[data-surface="marketing"] .btn--ghost:hover { background: rgba(255, 255, 255, 0.78); border-color: rgba(15, 23, 42, 0.18); transform: translateY(-1px); } /* ----- .btn--shine: rim reflection + opposite-cursor 3D tilt ----- IDLE: a bright spot orbits the rim (JS rAF drives --shine-angle). HOVER: JS locks the spot to the corner OPPOSITE the cursor and tilts the button OPPOSITE the cursor too. Orbit resumes seamlessly from the locked angle on leave. No CSS animation, so no inline-vs-animation conflict. */ @property --shine-angle { syntax: ""; initial-value: 0deg; inherits: false; } html[data-surface="marketing"] .btn--shine { transform-style: preserve-3d; --shine-angle: 0deg; transition: transform .25s var(--ease-out), background .25s ease, border-color .25s ease, box-shadow .25s ease; } html[data-surface="marketing"] .btn--shine::after { content: ""; position: absolute; inset: 0; width: auto; top: 0; bottom: 0; left: 0; border-radius: inherit; padding: 1.5px; /* Single bright peak in the gradient. With `from var(--shine-angle)`, the peak's compass position = shine-angle + 90deg. JS sets shine-angle so the peak lands on the corner opposite the cursor when hovered. */ background: conic-gradient( from var(--shine-angle), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0.85) 86deg, #ffffff 90deg, rgba(255, 255, 255, 0.85) 94deg, rgba(255, 255, 255, 0) 120deg, rgba(255, 255, 255, 0) 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 2; opacity: 1; transform: none; transition: filter .25s ease; mix-blend-mode: normal; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.90)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.50)); } html[data-surface="marketing"] .btn--shine.is-shine-locked::after { /* On hover, smooth the spot's slide as the cursor moves around */ transition: filter .25s ease; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.70)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.45)); } /* Ghost-on-light variant: white rim shine on a white background loses its halo in plain white drop-shadows — give it a subtle dark+indigo contrast halo so the shine reads. Core stroke stays white. */ html[data-surface="marketing"] .btn--ghost.btn--shine::after { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgba(15,23,42,.35)) drop-shadow(0 0 8px rgba(223, 255, 146,.45)) drop-shadow(0 0 18px rgba(223, 255, 146,.25)); } html[data-surface="marketing"] .btn--ghost.btn--shine.is-shine-locked::after { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(15,23,42,.45)) drop-shadow(0 0 12px rgba(223, 255, 146,.29)) drop-shadow(0 0 26px rgba(223, 255, 146,.35)); } html[data-surface="marketing"] .btn--shine.is-shine-locked { /* Smooth slide of --shine-angle to the cursor-mirror as the cursor moves */ transition: transform .25s var(--ease-out), background .25s ease, border-color .25s ease, box-shadow .25s ease, --shine-angle .12s linear; } /* Ghost-dark used on dark sections (cta-final). Keep light-on-dark contrast. */ html[data-surface="marketing"] .btn--ghost-dark { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 6px 16px -10px rgba(0, 0, 0, 0.4); } html[data-surface="marketing"] .btn--ghost-dark::before { background: radial-gradient(60% 120% at 0% 0%, rgba(255, 255, 255, 0.45), transparent 55%), radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.25), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 35%); } html[data-surface="marketing"] .btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); } html[data-surface="marketing"] .btn .arrow { transition: transform .3s var(--ease-out); } html[data-surface="marketing"] .btn:hover .arrow { transform: translateX(4px); } html[data-surface="marketing"] .btn--sm { padding: 8px 14px; font-size: 13.5px; } html[data-surface="marketing"] .btn--lg { padding: 14px 24px; font-size: 15px; } /* keep the nav "Get Started" CTA the same width in EN + AR (Arabic label is shorter) */ html[data-surface="marketing"] .nav__actions .btn--lime { min-width: 126px; justify-content: center; text-align: center; } /* Footer app-store buttons (replaces inline-style boxes) */ html[data-surface="marketing"] .store-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 13px; transition: background .2s ease, transform .25s var(--ease-out); } html[data-surface="marketing"] .store-btn:hover { background: #1c2335; transform: translateY(-1px); } /* Link with underline animation */ html[data-surface="marketing"] .tlink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; position: relative; } html[data-surface="marketing"] .tlink::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -2px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .4s var(--ease-out); } html[data-surface="marketing"] .tlink:hover::after { transform: scaleX(1); } html[data-surface="marketing"] .tlink .arrow { transition: transform .3s var(--ease-out); } html[data-surface="marketing"] .tlink:hover .arrow { transform: translate(3px, -3px); } /* ========================================================= Navbar (floating glass pill) ========================================================= */ html[data-surface="marketing"] .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; padding: 0; transition: top .35s ease; pointer-events: none; } html[data-surface="marketing"] .nav .container.nav__inner { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1180px; padding: 8px 8px 8px 20px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(32px) saturate(190%); -webkit-backdrop-filter: blur(32px) saturate(190%); border: 1px solid rgba(15, 23, 42, 0.06); border-top-color: rgba(255, 255, 255, 0.95); border-radius: var(--r-pill); isolation: isolate; overflow: hidden; box-shadow: var(--shadow-glass); position: relative; } /* Static corner shines + top-edge sheen — sits behind content via z-index -1 */ html[data-surface="marketing"] .nav .container.nav__inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 110% at 0% 0%, rgba(255, 255, 255, 0.85), transparent 45%), radial-gradient(70% 110% at 100% 0%, rgba(255, 255, 255, 0.70), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 24%); mix-blend-mode: screen; opacity: 0.95; z-index: -1; } /* Nav perimeter shimmer — radial glow sweeps diagonally across the entire pill border (same technique as the cards). Replaces the old bottom-only comet sweep. */ html[data-surface="marketing"] .nav .container.nav__inner::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; padding: 1.5px; background-image: radial-gradient(transparent 0%,transparent 30%,var(--shimmer-color, #DFFF92) 50%,transparent 70%,transparent 100%); background-size: 283% 283%; background-position: 153% 174%; animation: shimmer-border 11s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 1.5px rgba(223, 255, 146,.12); filter: drop-shadow(0 0 8px rgba(223, 255, 146,.29)); } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .nav .container.nav__inner::after { animation: none; opacity: 0.5; } } /* Hide the SVG neon scaffold — superseded by the conic-gradient border above */ html[data-surface="marketing"] .nav__neon { display: none; } html[data-surface="marketing"] .nav.is-scrolled { top: 12px; } html[data-surface="marketing"] .nav.is-scrolled .container.nav__inner { background: rgba(255, 255, 255, 0.55); } html[data-surface="marketing"] .nav__logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.04em; font-weight: 600; color: var(--ink); } html[data-surface="marketing"] .nav__logo .logo-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 14px; position: relative; } html[data-surface="marketing"] .nav__logo .logo-mark::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #DFFF92, #CDFF55); transform: rotate(45deg); } html[data-surface="marketing"] .nav__logo .logo-img { height: 26px; width: auto; display: block; } /* Light theme: keep dark logo as-is */ html[data-surface="marketing"] .logo-img--ink { filter: brightness(0) saturate(100%); } html[data-surface="marketing"] .logo-img--light { filter: none; } html[data-surface="marketing"] .cta-final .logo-img,html[data-surface="marketing"] .section--ink .logo-img { filter: brightness(0) invert(1); } html[data-surface="marketing"] .nav__menu { display: flex; align-items: center; gap: 4px; flex: 1; margin-left: 12px; } html[data-surface="marketing"] .nav__item { position: relative; padding: 6px 12px; font-size: 14px; color: var(--text); border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; transition: background .2s ease, color .2s ease; } html[data-surface="marketing"] .nav__item:hover { background: rgba(15, 23, 42, 0.05); color: var(--ink); } html[data-surface="marketing"] .nav__item .caret { width: 10px; height: 10px; opacity: 0.6; } /* "Talk to sales" spacing fix — explicit normal word-spacing so inherited letter-spacing tweaks don't visually open the gap between "Talk" and "to". */ html[data-surface="marketing"] .nav__item.talk { word-spacing: normal; letter-spacing: -0.005em; white-space: nowrap; } html[data-surface="marketing"] .nav__actions { display: flex; align-items: center; gap: 8px; } html[data-surface="marketing"] .nav__hamb { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.10); background: rgba(255, 255, 255, 0.55); } html[data-surface="marketing"] .nav__hamb span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; } html[data-surface="marketing"] .nav__hamb span::before,html[data-surface="marketing"] .nav__hamb span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease-out), top .2s ease; } html[data-surface="marketing"] .nav__hamb span::before { top: -6px; } html[data-surface="marketing"] .nav__hamb span::after { top: 6px; } html[data-surface="marketing"] .nav__hamb.is-open span { background: transparent; } html[data-surface="marketing"] .nav__hamb.is-open span::before { top: 0; transform: rotate(45deg); } html[data-surface="marketing"] .nav__hamb.is-open span::after { top: 0; transform: rotate(-45deg); } /* Dropdown */ /* Dropdown portal: rendered at body level by JS so its backdrop-filter can see through the page (nav__inner creates its own stacking context). */ html[data-surface="marketing"] .nav__dropdown-layer { position: fixed; inset: 0; pointer-events: none; z-index: 110; } html[data-surface="marketing"] .nav__dropdown { position: fixed; top: 0; left: 0; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(120px) saturate(240%); -webkit-backdrop-filter: blur(120px) saturate(240%); border: 1px solid rgba(255, 255, 255, 0.45); border-top-color: rgba(255, 255, 255, 0.85); border-radius: var(--radius); padding: 10px; min-width: 300px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(15, 23, 42, 0.06), 0 24px 48px -16px rgba(15, 23, 42, 0.18), 0 12px 24px -12px rgba(15, 23, 42, 0.12); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .25s var(--ease-out); isolation: isolate; overflow: hidden; } /* Top-edge sheen on dropdown */ html[data-surface="marketing"] .nav__dropdown::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.40), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 28%); mix-blend-mode: screen; opacity: 0.95; } html[data-surface="marketing"] .nav__dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } html[data-surface="marketing"] .nav__dropdown a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; transition: background .2s ease; } html[data-surface="marketing"] .nav__dropdown a:hover { background: rgba(15, 23, 42, 0.05); } html[data-surface="marketing"] .nav__dropdown a strong { font-weight: 500; font-size: 14px; color: var(--ink); } html[data-surface="marketing"] .nav__dropdown a span { font-size: 12.5px; color: var(--text-3); } /* Mega dropdown — grouped, icon-led (Mondu-style) */ html[data-surface="marketing"] .nav__dropdown--mega { min-width: 560px; padding: 16px; } html[data-surface="marketing"] .mega__group + .mega__group { margin-top: 8px; } html[data-surface="marketing"] .mega__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 4px 12px 10px; } /* Column-major fill: 1,2,3 down the left column, 4,5 down the right. */ html[data-surface="marketing"] .mega__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 2px; } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link { flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 12px; } html[data-surface="marketing"] .mega__ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(15, 23, 42, 0.06); color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease; } html[data-surface="marketing"] .mega__ico svg { width: 18px; height: 18px; } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link:hover .mega__ico { background: rgba(15,23,42,.09); border-color: rgba(15,23,42,.14); color: var(--ink); } html[data-surface="marketing"] .mega__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-surface="marketing"] .mega__text strong { font-weight: 500; font-size: 14px; color: var(--ink); } html[data-surface="marketing"] .mega__text span { font-size: 12.5px; line-height: 1.35; color: var(--text-3); } /* Featured mega (SS6, shopify.com benchmark) — the "Unlock Liquidity" panel promotes two hero tiles flanking a plain product list: · Fina for Buyers = indigo gradient tile w/ drifting Fina 4-point stars + sheen · Growth Funding = lime (#D4F84F) tile in ink The middle items (Pay Invoice / Pay in N / Pay Account) stay a plain list. */ html[data-surface="marketing"] .nav__dropdown--mega.nav__dropdown--feat { min-width: 700px; } html[data-surface="marketing"] .mega__cols { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 10px; align-items: stretch; } html[data-surface="marketing"] .mega__list { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-width: 0; } html[data-surface="marketing"] .nav__dropdown a.mega__feature { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 4px; min-height: 198px; padding: 14px; border-radius: 14px; transition: transform .35s var(--ease-out), box-shadow .35s ease; } html[data-surface="marketing"] .nav__dropdown a.mega__feature > * { position: relative; z-index: 2; } html[data-surface="marketing"] .nav__dropdown a.mega__feature--indigo,html[data-surface="marketing"] .nav__dropdown a.mega__feature--indigo:hover { background: linear-gradient(155deg,#2B2B2B 0,#111111 42%,#000000 100%); } html[data-surface="marketing"] .nav__dropdown a.mega__feature--lime,html[data-surface="marketing"] .nav__dropdown a.mega__feature--lime:hover { background: linear-gradient(155deg,#f2ffd6 0,#DFFF92 48%,#CDFF55 100%); } html[data-surface="marketing"] .nav__dropdown a.mega__feature:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(14, 19, 32, 0.35); } /* Background animation A — drifting Fina 4-point stars (two parallax layers; 84px translate loops both 84px + 42px tiles seamlessly). */ html[data-surface="marketing"] .mega__feature::before { content: ""; position: absolute; inset: -96px 0 0 -96px; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 0c1 8 4 11 12 12-8 1-11 4-12 12-1-8-4-11-12-12 8-1 11-4 12-12Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 0c1 8 4 11 12 12-8 1-11 4-12 12-1-8-4-11-12-12 8-1 11-4 12-12Z'/%3E%3C/svg%3E"); background-repeat: repeat, repeat; background-size: 84px 84px, 42px 42px; background-position: 14px 22px, 36px 54px; opacity: .26; animation: megaStarDrift 30s linear infinite; } html[data-surface="marketing"] .mega__feature--lime::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 0c1 8 4 11 12 12-8 1-11 4-12 12-1-8-4-11-12-12 8-1 11-4 12-12Z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 0c1 8 4 11 12 12-8 1-11 4-12 12-1-8-4-11-12-12 8-1 11-4 12-12Z'/%3E%3C/svg%3E"); opacity: .10; animation-duration: 38s; } @keyframes megaStarDrift { to { transform: translate3d(84px, 84px, 0); } } /* Background animation B — periodic gradient sweep/sheen. */ html[data-surface="marketing"] .mega__feature::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); background-size: 240% 100%; background-position: 130% 0; animation: megaSheen 6s ease-in-out infinite; } html[data-surface="marketing"] .mega__feature--lime::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%); background-size: 240% 100%; background-position: 130% 0; animation-delay: 1.2s; } @keyframes megaSheen { 0%, 58% { background-position: 130% 0; } 92%, 100% { background-position: -140% 0; } } html[data-surface="marketing"] .mega__feature .mega__feature-tag { align-self: flex-start; margin-bottom: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); } html[data-surface="marketing"] .mega__feature--lime .mega__feature-tag { background: rgba(14, 19, 32, 0.08); color: #000000; border-color: rgba(14, 19, 32, 0.18); } html[data-surface="marketing"] .mega__feature .mega__feature-text { display: flex; flex-direction: column; gap: 3px; } html[data-surface="marketing"] .mega__feature .mega__feature-text strong { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: #fff; } html[data-surface="marketing"] .mega__feature .mega__feature-text span { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); } html[data-surface="marketing"] .mega__feature--lime .mega__feature-text strong { color: #000000; } html[data-surface="marketing"] .mega__feature--lime .mega__feature-text span { color: rgba(14, 19, 32, 0.72); } html[data-surface="marketing"] .mega__feature .mega__feature-arrow { margin-top: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #fff; transition: transform .3s var(--ease-out), background .3s ease; } html[data-surface="marketing"] .mega__feature--lime .mega__feature-arrow { background: rgba(14, 19, 32, 0.10); color: #000000; } html[data-surface="marketing"] .nav__dropdown a.mega__feature:hover .mega__feature-arrow { transform: translate(2px, -2px); } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .mega__feature::before,html[data-surface="marketing"] .mega__feature::after { animation: none; } html[data-surface="marketing"] .nav__dropdown a.mega__feature:hover { transform: none; } } /* Shopify-style "Unlock Liquidity" mega menu: product link column with an accent section header, plus a featured right panel carrying the live buyers-hero animation as a thumbnail. */ /* Fixed width, not min-width. Shrink-to-fit sized each shop dropdown to its own content, so a menu with one long unwrapped description resolved to max-content and came out half as wide again as its neighbours. Pinning the width makes all three menus the same box and lets the descriptions wrap. */ html[data-surface="marketing"] .nav__dropdown--mega.nav__dropdown--shop { width: 620px; min-width: 0; max-width: calc(100vw - 32px); padding: 18px; } html[data-surface="marketing"] .megashop { display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 22px; } html[data-surface="marketing"] .megashop__head { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; /* #047857: 4.8:1 on white (WCAG AA) — the lighter brand green washed out */ color: #047857; margin: 2px 8px 10px; } html[data-surface="marketing"] .megashop__links { display: flex; flex-direction: column; gap: 2px; } /* featured panel = a link to /buyers wrapping the animation thumbnail */ html[data-surface="marketing"] .nav__dropdown a.megashop__feat { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 0 24px; border-inline-start: 1px solid var(--line); border-radius: 0; } html[data-surface="marketing"] .nav__dropdown a.megashop__feat:hover { background: transparent; } html[data-surface="marketing"] .megashop__thumb { position: relative; display: block; width: 100%; aspect-ratio: 320 / 300; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: radial-gradient(120% 120%at 30% 20%,#1b2036,#000000); box-shadow: 0 16px 34px -18px rgba(14, 19, 32, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05); } /* nav_buyers_thumb.html is authored square (320×320) to fill this box exactly */ html[data-surface="marketing"] .megashop__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } html[data-surface="marketing"] .megashop__feat strong { font-weight: 600; font-size: 14.5px; color: var(--ink); } html[data-surface="marketing"] .megashop__feat p { font-size: 12.5px; line-height: 1.4; color: var(--text-3); margin-top: 3px; } html[data-surface="marketing"] .megashop__cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); } html[data-surface="marketing"] .megashop__cta svg { transition: transform .3s var(--ease-out); } html[data-surface="marketing"] .nav__dropdown a.megashop__feat:hover .megashop__cta svg { transform: translateX(3px); } /* ---- Growth Funding spotlight (client ask) ------------------------------- Singles Growth Funding out of the Products list WITHOUT promoting it to a second featured panel — the right-hand /buyers tile already owns that slot, and two hero blocks in one dropdown cancel each other out. Treatment reuses the approved brand pairing from .mega__feature--lime: ink icon tile + lime (#D4F84F) glyph, a lime wash across the row, the trend line drawing itself on a loop, two Fina 4-point stars twinkling in the corner, and the same megaSheen sweep the featured tiles run. Decorative only — no copy added, so there is nothing new to translate and the AR build is unaffected. */ html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--spot { position: relative; isolation: isolate; overflow: hidden; border-radius: 11px; background: linear-gradient(105deg, rgba(212, 248, 79, 0.34) 0%, rgba(212, 248, 79, 0.12) 44%, rgba(212, 248, 79, 0) 80%), rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(162, 200, 40, 0.38); transition: background .25s ease, box-shadow .25s ease, transform .25s var(--ease-out); } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--spot:hover { transform: translateY(-1px); background: linear-gradient(105deg, rgba(212, 248, 79, 0.48) 0%, rgba(212, 248, 79, 0.18) 48%, rgba(212, 248, 79, 0.02) 84%), rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px rgba(162, 200, 40, 0.62), 0 14px 26px -18px rgba(14, 19, 32, 0.45); } html[data-surface="marketing"] .mega__link--spot > * { position: relative; z-index: 2; } /* periodic sheen — same keyframes/rhythm as the featured tiles */ html[data-surface="marketing"] .mega__link--spot::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.58) 50%, transparent 62%); background-size: 240% 100%; background-position: 130% 0; animation: megaSheen 6s ease-in-out infinite; } /* ink tile + lime glyph, held through hover (the generic hover turns icon tiles indigo — that would erase the spotlight exactly when it is aimed at) */ html[data-surface="marketing"] .mega__link--spot .mega__ico,html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--spot:hover .mega__ico { background: #000000; border-color: #000000; color: #DFFF92; } /* the growth curve redraws itself each cycle, then sweeps out */ html[data-surface="marketing"] .mega__link--spot .mega__ico .spot-draw { stroke-dasharray: 26; stroke-dashoffset: 26; animation: spotDraw 4.6s ease-in-out infinite; } @keyframes spotDraw { 0% { stroke-dashoffset: 26; } 30%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -26; } } /* twinkling Fina stars, top corner (inset-inline-end keeps RTL correct) */ html[data-surface="marketing"] .mega__spark { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 3; width: 26px; height: 22px; color: var(--lime); pointer-events: none; } html[data-surface="marketing"] .mega__spark svg { position: absolute; display: block; transform-origin: center; animation: spotTwinkle 3.4s ease-in-out infinite; } html[data-surface="marketing"] .mega__spark-a { top: 0; inset-inline-end: 0; width: 12px; height: 12px; } html[data-surface="marketing"] .mega__spark-b { bottom: 0; inset-inline-end: 13px; width: 7px; height: 7px; animation-delay: .9s; } @keyframes spotTwinkle { 0%, 100% { transform: scale(.45) rotate(0deg); opacity: 0; } 22% { transform: scale(1) rotate(35deg); opacity: 1; } 52% { transform: scale(.72) rotate(70deg); opacity: .55; } } /* Mobile drawer: same lime language, flattened to a left accent bar. */ html[data-surface="marketing"] .nav__macc-panel a.is-spot { position: relative; padding-inline-start: 26px; background: linear-gradient(100deg, rgba(212, 248, 79, 0.30) 0%, rgba(212, 248, 79, 0) 62%); color: var(--ink); } html[data-surface="marketing"] .nav__macc-panel a.is-spot::before { content: ""; position: absolute; inset-inline-start: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: #C2EC33; } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .mega__link--spot::after,html[data-surface="marketing"] .mega__link--spot .mega__ico .spot-draw,html[data-surface="marketing"] .mega__spark svg { animation: none; } html[data-surface="marketing"] .mega__link--spot .mega__ico .spot-draw { stroke-dashoffset: 0; } html[data-surface="marketing"] .mega__spark svg { opacity: 1; transform: none; } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--spot:hover { transform: none; } } /* ---- Outbound nav items (Operate Smarter -> Omni) ----------------------- The Platform panel is the only menu that sends a visitor off finapay, so its row carries a small arrow-out-of-box glyph, visible at rest rather than only on hover, plus a screen-reader-only "Opens in a new tab". The glyph is mirrored under [dir=rtl] in rtl.css so it still reads as "away from the text" in Arabic. Everything else about the row matches the other menus. */ html[data-surface="marketing"] .u-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Arrow glyph alone. A "NEW TAB" pill was tried and read as a badge competing with the link title; the announcement lives in the .u-sr-only span instead. */ html[data-surface="marketing"] .mega__text strong .mega__ext { display: inline-flex; align-items: center; margin-inline-start: 6px; color: var(--text-3); vertical-align: middle; } html[data-surface="marketing"] .mega__ext svg { width: 9px; height: 9px; flex: none; } html[data-surface="marketing"] .megashop__cta svg { flex: none; } /* Mobile drawer: the outbound row carries the same marker. */ html[data-surface="marketing"] .nav__macc-panel a.is-ext { display: inline-flex; align-items: center; gap: 8px; } html[data-surface="marketing"] .nav__macc-panel a.is-ext svg { flex: none; opacity: .6; } /* The Platform panel reuses the shop dropdown wholesale — same shell width, same link rows, same right-hand panel — so the only rule it needs of its own is the outbound arrow picking up the link colour on hover. */ html[data-surface="marketing"] .nav__dropdown--mega a.mega__link--ext:hover .mega__ext { color: var(--ink); } /* Stacked "Unlock Liquidity" dropdown (SS6): Fina for Buyers as a distinguished header, products indented beneath, Growth Funding as a darker footer item. */ html[data-surface="marketing"] .nav__dropdown--mega.nav__dropdown--stack { min-width: 384px; } html[data-surface="marketing"] .nav__dropdown a.mega__head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; margin-bottom: 8px; border-radius: 13px; background: linear-gradient(135deg,#DFFF92,#CDFF55); box-shadow: 0 10px 22px -12px rgba(223, 255, 146,.27); } html[data-surface="marketing"] .nav__dropdown a.mega__head:hover { background: linear-gradient(135deg, #CDFF55, #DFFF92); } html[data-surface="marketing"] .mega__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-surface="marketing"] .mega__head-text strong { font-weight: 600; font-size: 15px; color: #000; } html[data-surface="marketing"] .mega__head-text span { font-size: 12px; line-height: 1.35; color: rgba(0, 0, 0, 0.68); } html[data-surface="marketing"] .mega__head-arrow { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.10); color: #000; transition: transform .3s var(--ease-out); } html[data-surface="marketing"] .nav__dropdown a.mega__head:hover .mega__head-arrow { transform: translate(2px, -2px); } html[data-surface="marketing"] .mega__list--indent { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 12px; margin-inline-start: 9px; border-inline-start: 2px solid var(--line); } /* Growth Funding — darker footer item */ html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--foot { margin-top: 6px; margin-inline-start: -11px; background: #000000; border-radius: 11px; } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--foot:hover { background: #171D2E; } html[data-surface="marketing"] .mega__link--foot .mega__text strong { color: #fff; } html[data-surface="marketing"] .mega__link--foot .mega__text span { color: rgba(255, 255, 255, 0.68); } html[data-surface="marketing"] .mega__link--foot .mega__ico { background: rgba(255, 255, 255, 0.10); color: #DFFF92; } html[data-surface="marketing"] .nav__dropdown--mega a.mega__link.mega__link--foot:hover .mega__ico { background: rgba(212, 248, 79, 0.16); color: #DFFF92; } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .nav__dropdown a.mega__head:hover .mega__head-arrow { transform: none; } } /* Mobile menu (glass drawer) — uses left:100%/left:0 instead of translateX so the offscreen position can't contribute to horizontal scroll width on iOS. */ html[data-surface="marketing"] .nav__mobile { position: fixed; top: 0; bottom: 0; left: 100%; width: 100%; background: rgba(246, 248, 251, 0.95); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); z-index: 99; padding: 96px 32px 32px; display: flex; flex-direction: column; gap: 8px; transition: left .5s var(--ease-out); overflow-y: auto; overflow-x: hidden; } html[data-surface="marketing"] .nav__mobile.is-open { left: 0; } /* Mobile drawer: parents are accordions (tap to expand sub-items); leaf links navigate + close the drawer. */ html[data-surface="marketing"] .nav__mobile .nav__macc-head,html[data-surface="marketing"] .nav__mobile .nav__mlink { font-family: var(--font-display); font-size: 30px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: none; } html[data-surface="marketing"] .nav__macc-chev { width: 22px; height: 22px; flex: none; opacity: .55; transition: transform .3s var(--ease-out); } html[data-surface="marketing"] .nav__macc.is-open .nav__macc-chev { transform: rotate(180deg); } html[data-surface="marketing"] .nav__macc-panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); display: flex; flex-direction: column; } html[data-surface="marketing"] .nav__macc.is-open .nav__macc-panel { max-height: 440px; } html[data-surface="marketing"] .nav__macc-panel a { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text-2); padding: 11px 0 11px 18px; border-bottom: 1px solid var(--hairline); } html[data-surface="marketing"] .nav__macc-panel a:hover { color: var(--ink); font-weight: 600; } @media (max-width: 960px) { html[data-surface="marketing"] .nav__menu,html[data-surface="marketing"] .nav__actions .btn--lg,html[data-surface="marketing"] .nav__actions .talk { display: none; } html[data-surface="marketing"] .nav__hamb { display: inline-flex; } html[data-surface="marketing"] .nav .container.nav__inner { padding-left: 16px; } /* Portaled dropdowns shouldn't open on mobile (their triggers are hidden) */ html[data-surface="marketing"] .nav__dropdown-layer { display: none; } } /* ========================================================= Footer (glass) ========================================================= */ html[data-surface="marketing"] .footer { background: transparent; border-top: 1px solid var(--hairline); padding: 80px 0 40px; position: relative; z-index: 2; } html[data-surface="marketing"] .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 64px; } html[data-surface="marketing"] .footer__brand p { color: var(--text-2); max-width: 30ch; margin: 16px 0 24px; } html[data-surface="marketing"] .footer__col h5 { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 18px; font-weight: 500; } html[data-surface="marketing"] .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } html[data-surface="marketing"] .footer__col a { font-size: 14.5px; color: var(--text); transition: color .2s ease; display: inline-block; position: relative; } html[data-surface="marketing"] .footer__col a:hover { color: var(--ink); font-weight: 600; } html[data-surface="marketing"] .footer__store { display: flex; gap: 8px; margin-bottom: 18px; } html[data-surface="marketing"] .footer__store img { height: 40px; } html[data-surface="marketing"] .footer__social { display: flex; gap: 14px; } html[data-surface="marketing"] .footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.55); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease, color .2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-surface="marketing"] .footer__social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); } html[data-surface="marketing"] .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 32px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-3); } html[data-surface="marketing"] .footer__legal a { color: var(--text-2); } html[data-surface="marketing"] .footer__legal a:hover { color: var(--ink); text-decoration: underline; } @media (max-width: 900px) { html[data-surface="marketing"] .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 540px) { html[data-surface="marketing"] .footer__grid { grid-template-columns: 1fr; } html[data-surface="marketing"] .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; } } /* ========================================================= Decorative glass surfaces (uic / fchip) ========================================================= */ html[data-surface="marketing"] .uic { background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 18px; color: #fff; padding: 16px 18px; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.55); } html[data-surface="marketing"] .uic__row { display: flex; align-items: center; gap: 14px; } html[data-surface="marketing"] .uic__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); position: relative; flex-shrink: 0; } html[data-surface="marketing"] .uic__logo::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #DFFF92, #CDFF55); transform: rotate(45deg); } html[data-surface="marketing"] .uic__title { font-size: 17px; font-weight: 500; line-height: 1.25; color: #fff; } html[data-surface="marketing"] .uic__sub { font-size: 13.5px; color: rgba(255,255,255,0.55); margin-top: 2px; } html[data-surface="marketing"] .fchip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--glass-border); border-top-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); color: var(--ink); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-glass); } html[data-surface="marketing"] .fchip--lime { background: var(--accent); color: var(--ink); border-color: transparent; } html[data-surface="marketing"] .fchip__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--ink); font-size: 11px; font-weight: 700; } /* ========================================================= Reveal states (GSAP animates from these) ========================================================= */ html[data-surface="marketing"] .reveal { opacity: 0; transform: translateY(28px); } html[data-surface="marketing"] .reveal-up { opacity: 0; transform: translateY(40px); } html[data-surface="marketing"] .reveal-down { opacity: 0; transform: translateY(-30px); } html[data-surface="marketing"] .reveal-left { opacity: 0; transform: translateX(-40px); } html[data-surface="marketing"] .reveal-right { opacity: 0; transform: translateX(40px); } html[data-surface="marketing"] .reveal-scale { opacity: 0; transform: scale(0.94); } html[data-surface="marketing"].no-js .reveal, html[data-surface="marketing"].no-js .reveal-up, html[data-surface="marketing"].no-js .reveal-down, html[data-surface="marketing"].no-js .reveal-left, html[data-surface="marketing"].no-js .reveal-right, html[data-surface="marketing"].no-js .reveal-scale { opacity: 1; transform: none; } /* ========================================================= Scrollbar + focus + selection ========================================================= */ html[data-surface="marketing"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-surface="marketing"] ::-webkit-scrollbar-track { background: transparent; } html[data-surface="marketing"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 10px; } html[data-surface="marketing"] ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); } html[data-surface="marketing"] :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: inherit; } html[data-surface="marketing"] ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ========================================================= Accessibility overrides ========================================================= */ @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] *,html[data-surface="marketing"] *::before,html[data-surface="marketing"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html[data-surface="marketing"] .orb-field { display: none; } html[data-surface="marketing"] .nav .container.nav__inner::before { display: none; } } @media (prefers-reduced-transparency: reduce) { html[data-surface="marketing"] .orb-field { display: none; } html[data-surface="marketing"] body { background: var(--canvas-base); } html[data-surface="marketing"] body::before { display: none; } html[data-surface="marketing"] .nav .container.nav__inner,html[data-surface="marketing"] .nav__dropdown,html[data-surface="marketing"] .nav__mobile,html[data-surface="marketing"] .fchip,html[data-surface="marketing"] .btn--ghost,html[data-surface="marketing"] .footer__social a { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; border-color: rgba(15, 23, 42, 0.12); } html[data-surface="marketing"] .btn--ghost-dark { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 20, 30, 0.95); } html[data-surface="marketing"] .cursor-dot,html[data-surface="marketing"] .cursor-ring { display: none !important; } html[data-surface="marketing"] body,html[data-surface="marketing"] body * { cursor: auto !important; } } @media (prefers-contrast: more) { html[data-surface="marketing"] { --glass-bg: rgba(255, 255, 255, 0.92); --glass-bg-hover: rgba(255, 255, 255, 0.98); --glass-border: rgba(15, 23, 42, 0.30); --text-2: rgba(15, 23, 42, 0.85); --text-3: rgba(15, 23, 42, 0.65); } } /* ========================================================= Hero cursor-tracking glow (--mx / --my set by glass.js) ========================================================= */ html[data-surface="marketing"] .hero,html[data-surface="marketing"] .page-hero,html[data-surface="marketing"] .cta-final,html[data-surface="marketing"] .post-cover { position: relative; } html[data-surface="marketing"] .hero::after,html[data-surface="marketing"] .page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 360px at var(--mx, 50%) var(--my, 30%),rgba(223, 255, 146,.1),transparent 60%); pointer-events: none; z-index: 1; transition: opacity .25s ease; } /* Staggered reveal for [data-stagger] children that AREN'T already handled by a reveal-* gsap animation (those keep their own reveal — avoids two competing tweens stranding cards half-faded). Driven by IntersectionObserver in main.js; the hidden start-state is gated behind .has-stagger so a no-JS/no-IO load shows everything. Per-item transition-delay is set inline by the script. */ html[data-surface="marketing"].has-stagger [data-stagger] > *:not([class*="reveal"]){ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } html[data-surface="marketing"].has-stagger [data-stagger].is-in > *:not([class*="reveal"]){ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html[data-surface="marketing"].has-stagger [data-stagger] > *:not([class*="reveal"]){ transition-duration:.3s; transform:none; } } /* ---------- Lime rebrand additions (ported from the client bundle) ---------- */ html[data-surface="marketing"] .tlink:hover { font-weight: 600; } /* GENERATED by scripts/scope-ref-css.ts from src/styles/ref/raw/landing.css — DO NOT EDIT. Reference stylesheet, verbatim, scoped to html[data-surface="marketing"]. */ /* ========================================================= Landing page - glass repaint ========================================================= */ /* ------- HERO ------- */ html[data-surface="marketing"] .hero { padding: 160px 0 60px; position: relative; overflow: hidden; } html[data-surface="marketing"] .hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; z-index: 2; } html[data-surface="marketing"] .hero h1 { max-width: 14ch; } html[data-surface="marketing"] .hero h1 .accent { color: var(--ink); font-weight: 500; } html[data-surface="marketing"] .hero__dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.85; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 75%); } /* margin:0 — the default

1em top/bottom stacked on top of the flex gap and pushed the CTAs (and the dashboard below them) way down the fold. */ html[data-surface="marketing"] .hero .lead { font-size: clamp(17px, 1.4vw, 19px); max-width: 56ch; text-align: center; color: var(--text-2); margin: 0; } html[data-surface="marketing"] .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } html[data-surface="marketing"] .hero__visual { margin-top: 24px; position: relative; width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; perspective: 1400px; } html[data-surface="marketing"] .hero__visual img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); } /* "Liquidity for every business" label bar sitting atop the hero UI (LP2 "Hero UI — add this on top of the Hero UI"). Slim gradient strip. */ html[data-surface="marketing"] .hero__uilabel { text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); padding: 8px 0; margin-bottom: 10px; border-radius: 999px; background: linear-gradient(90deg,transparent 0,rgba(223, 255, 146,.06) 20%,rgba(205, 255, 85,.1) 50%,rgba(255,138,180,.07) 80%,transparent 100%); } /* Embedded animation iframes - wrapped in glass shell */ html[data-surface="marketing"] .anim-frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); box-shadow: var(--shadow-glass); isolation: isolate; } html[data-surface="marketing"] .anim-frame iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; color-scheme: light; } html[data-surface="marketing"] .anim-frame--hero { /* Aspect matches the dashboard pill exactly (1160:680) so the dashboard fills the iframe edge-to-edge — no transparent margins, no page background bleeding through. */ aspect-ratio: 1160 / 680; background: transparent; border: 0; box-shadow: none; /* No outer radius — the dashboard already has its own rounded corners. A heavier wrapper radius was clipping the Fina logo / icons / sidebar. Keep overflow:hidden so the 200%-sized scaled iframe can't push horizontal scroll. */ border-radius: 0; } html[data-surface="marketing"] .anim-frame--hero iframe { width: 200%; height: 200%; transform: scale(0.5); transform-origin: top left; } html[data-surface="marketing"] .anim-frame--usecase { aspect-ratio: 16 / 9; width: 100%; } html[data-surface="marketing"] .anim-frame--card { aspect-ratio: 16 / 9; margin: 16px 0; border-radius: 14px; } html[data-surface="marketing"] .hero__trust { margin-top: 48px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; color: var(--text-2); font-size: 14px; } html[data-surface="marketing"] .hero__trust span { display: inline-flex; align-items: center; gap: 8px; } html[data-surface="marketing"] .hero__trust .check { width: 18px; height: 18px; border-radius: 50%; background: rgba(94, 107, 246,.22); border: 1px solid rgba(94, 107, 246,.6); color: var(--lime-deep); display: grid; place-items: center; font-size: 11px; font-weight: 700; } /* Hero glow blob (subtle radial wash above the canvas) */ html[data-surface="marketing"] .hero::before { content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 1200px; height: 800px; background: radial-gradient(50% 50%at 50% 50%,rgba(223, 255, 146,.18)0,transparent 70%); pointer-events: none; z-index: 0; } /* ------- LOGO STRIP ------- */ /* Hidden per client feedback (LP2 "Trust Bar — hide the logos stripe for now"). The "Liquidity for every business" label now sits atop the hero UI instead. */ html[data-surface="marketing"] .logo-strip { display: none; padding: 40px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; position: relative; z-index: 2; } html[data-surface="marketing"] .logo-strip__label { text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 24px; } html[data-surface="marketing"] .logo-strip__track { display: flex; gap: 80px; width: max-content; animation: marquee 40s linear infinite; align-items: center; } html[data-surface="marketing"] .logo-strip__track span { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-3); white-space: nowrap; opacity: 0.5; transition: opacity .3s ease, color .3s ease; } html[data-surface="marketing"] .logo-strip__track span:hover { opacity: 1; color: var(--ink); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } html[data-surface="marketing"] .logo-strip__viewport { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } /* ------- VALUE CARDS ------- */ html[data-surface="marketing"] .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1500px; } html[data-surface="marketing"] .values__card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* Transparent borders — keep border slot for layout consistency, no visible line */ border: 1px solid transparent; border-top-color: transparent; border-radius: var(--radius-xl); padding: 28px 32px; min-height: 0; display: flex; flex-direction: column; gap: 20px; justify-content: flex-start; transition: transform .6s var(--ease-out), background-color .25s ease, box-shadow .4s ease; position: relative; isolation: isolate; box-shadow: var(--shadow-glass); /* will-change: transform removed — was causing browsers to cache the entire card (incl. text) as a low-res raster while compositing, blurring text */ /* Crisp text rendering inside the cards */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } /* Align the 3 value cards: header pinned top, middle visual CENTERED in the free space, a divider just above the bottom caption (pinned bottom). */ html[data-surface="marketing"] .values__card > div:first-child { min-height: 58px; } /* header */ html[data-surface="marketing"] .values__card > .values__big,html[data-surface="marketing"] .values__card > .decision,html[data-surface="marketing"] .values__card > .anim-frame--card { flex: 1 1 auto; min-height: 0; margin: 0; display: flex; } html[data-surface="marketing"] .values__card > .values__big { align-items: center; } /* center the value */ html[data-surface="marketing"] .values__card > .decision { flex-direction: column; justify-content: center; } /* center the widget */ html[data-surface="marketing"] .values__card > .anim-frame--card { align-items: center; justify-content: center; } /* center the animation */ html[data-surface="marketing"] .values__card > p:last-child { /* caption + divider above it */ margin: 0; border-top: 1px solid color-mix(in oklab, currentColor 16%, transparent); padding-top: 18px; } /* Per-element font-smoothing for the largest text where subpixel matters most */ html[data-surface="marketing"] .values__card h3,html[data-surface="marketing"] .values__card p,html[data-surface="marketing"] .values__card .values__big { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* Shimmer-border: soft indigo glow sweeps diagonally across the border ring */ html[data-surface="marketing"] .values__card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1.5px; background-image: radial-gradient(transparent 0%,transparent 30%,var(--shimmer-color, #DFFF92) 50%,transparent 70%,transparent 100%); background-size: 283% 283%; background-position: 153% 174%; animation: shimmer-border 10s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 1.5px rgba(223, 255, 146,.1); filter: drop-shadow(0 0 8px rgba(223, 255, 146,.29)); } html[data-surface="marketing"] .values__card:nth-child(2)::before { animation-duration: 12s; } html[data-surface="marketing"] .values__card:nth-child(3)::before { animation-duration: 9s; } html[data-surface="marketing"] .values__card:hover::before { animation-duration: 5s; filter: drop-shadow(0 0 5px #DFFF92) drop-shadow(0 0 14px rgba(223, 255, 146,.34)) drop-shadow(0 0 30px rgba(223, 255, 146,.45)); } /* Use background-color (not the shorthand) so the feature card's background-image (phone) isn't reset to none on hover. */ html[data-surface="marketing"] .values__card:hover { background-color: var(--glass-bg-hover); /* border stays transparent — user requested no visible borders */ } html[data-surface="marketing"] .values__card > * { position: relative; z-index: 1; } html[data-surface="marketing"] .values__card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } html[data-surface="marketing"] .values__card p { color: var(--text-2); font-size: 15px; margin: 0; } html[data-surface="marketing"] .values__card--feature { background-color: #000000; color: #fff; /* Consistent dark colour block (LP2) — clean indigo wash behind the fast-decision visualization, no photo. */ background-image: radial-gradient(120% 80%at 50%0,rgba(223, 255, 146,.3)0,transparent 55%),radial-gradient(120% 80%at 50% 100%,rgba(157,240,107,.1)0,transparent 55%); background-size: cover; background-position: center; } html[data-surface="marketing"] .values__card--feature h3,html[data-surface="marketing"] .values__card--feature p { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } /* Keep the feature card dark on hover — the generic light hover bg was washing it white and hiding the white text. */ html[data-surface="marketing"] .values__card--feature:hover { background-color: #000000; } /* Value 2 — "fast decision" visualization (Affirm-style). CSS-only loop: bar fills, status flips Reviewing… → Approved · 8s, then repeats. */ html[data-surface="marketing"] .decision { align-self: center; width: 100%; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; padding: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-surface="marketing"] .decision__row { display: flex; align-items: center; gap: 10px; } html[data-surface="marketing"] .decision__avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #000; font-weight: 600; font-size: 13px; overflow: hidden; } /* Small round merchant photo (testimonial poster) instead of an initial. */ html[data-surface="marketing"] .decision__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-surface="marketing"] .decision__meta { display: flex; flex-direction: column; line-height: 1.2; } html[data-surface="marketing"] .decision__meta strong { font-size: 13px; font-weight: 600; color: #fff; } html[data-surface="marketing"] .decision__meta span { font-size: 11px; color: rgba(255, 255, 255, 0.6); } html[data-surface="marketing"] .decision__amt { margin-left: auto; font-size: 13px; font-weight: 600; color: #fff; } html[data-surface="marketing"] .decision__bar { margin: 14px 0 10px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; } html[data-surface="marketing"] .decision__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #9DF06B); animation: decFill 5s ease-in-out infinite; } html[data-surface="marketing"] .decision__statuses { position: relative; height: 18px; } html[data-surface="marketing"] .decision__status { position: absolute; inset: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } html[data-surface="marketing"] .decision__status--review { color: rgba(255, 255, 255, 0.78); animation: decReview 5s ease-in-out infinite; } html[data-surface="marketing"] .decision__status--ok { color: #9DF06B; animation: decApproved 5s ease-in-out infinite; } html[data-surface="marketing"] .decision__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(223, 255, 146,.27); animation: decPulse 1.2s ease-out infinite; } @keyframes decFill { 0% { width: 0; } 44% { width: 100%; } 100% { width: 100%; } } @keyframes decReview { 0%,40% { opacity: 1; } 46%,100% { opacity: 0; } } @keyframes decApproved { 0%,42% { opacity: 0; } 48%,94% { opacity: 1; } 100% { opacity: 0; } } @keyframes decPulse { 0% { box-shadow: 0 0 0 0 rgba(223, 255, 146,.25); } 100% { box-shadow: 0 0 0 8px rgba(223, 255, 146, 0); } } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .decision__fill { width: 100%; animation: none; } html[data-surface="marketing"] .decision__status--review { opacity: 0; animation: none; } html[data-surface="marketing"] .decision__status--ok { opacity: 1; animation: none; } html[data-surface="marketing"] .decision__pulse { animation: none; } } html[data-surface="marketing"] .values__big { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); color: var(--lime); line-height: 1; font-weight: 500; letter-spacing: -0.03em; text-shadow: none; } /* Pills demo for flexible card */ html[data-surface="marketing"] .values__pills { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; position: relative; } html[data-surface="marketing"] .values__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; width: fit-content; } html[data-surface="marketing"] .values__pill--ink { background: var(--ink); color: var(--ink); } html[data-surface="marketing"] .values__pill--violet { background: var(--accent); color: #0a0a14; padding-right: 4px; } html[data-surface="marketing"] .values__pill--violet-soft { background: rgba(223, 255, 146,.45); color: #0a0a14; padding-right: 4px; } html[data-surface="marketing"] .values__pill--white { background: #fff; color: #0a0a14; padding-right: 4px; } html[data-surface="marketing"] .values__pill .track { width: 60px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 4px; margin: 0 8px; position: relative; } html[data-surface="marketing"] .values__pill .track::after { content: ""; position: absolute; left: 0; top: -3px; width: 30%; height: 10px; background: rgba(255,255,255,0.9); border-radius: 8px; } html[data-surface="marketing"] .values__pill .knob { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,0.2); flex-shrink: 0; } html[data-surface="marketing"] .values__pill--white .knob { border-color: #0a0a14; background: transparent; } @media (max-width: 900px) { html[data-surface="marketing"] .values { grid-template-columns: 1fr; } } /* ------- USE CASES ------- */ html[data-surface="marketing"] .usecases__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; margin-bottom: 32px; } html[data-surface="marketing"] .usecases__row:last-child { margin-bottom: 0; } html[data-surface="marketing"] .usecases__row.flip > .usecases__viz { order: -1; } html[data-surface="marketing"] .usecases__viz { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); border-radius: var(--radius-xl); padding: 0; position: relative; overflow: hidden; transition: transform .6s var(--ease-out), background .25s ease, border-color .25s ease; box-shadow: var(--shadow-glass); isolation: isolate; } html[data-surface="marketing"] .usecases__viz > .anim-frame { border-radius: inherit; border: 0; box-shadow: none; background: transparent; } html[data-surface="marketing"] .usecases__viz:hover { transform: translateY(-4px); background: var(--glass-bg-hover); border-color: rgba(15, 23, 42, 0.14); } html[data-surface="marketing"] .usecases__viz img { max-height: 320px; width: auto; } html[data-surface="marketing"] .usecases__copy h3 { font-size: clamp(28px, 3vw, 40px); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 12px; color: var(--ink); } html[data-surface="marketing"] .usecases__copy .eyebrow { margin-bottom: 14px; display: inline-flex; } html[data-surface="marketing"] .usecases__copy p { color: var(--text-2); margin-bottom: 16px; max-width: 38ch; } @media (max-width: 900px) { html[data-surface="marketing"] .usecases__row,html[data-surface="marketing"] .usecases__row.flip { grid-template-columns: 1fr; gap: 32px; } html[data-surface="marketing"] .usecases__row.flip > .usecases__viz { order: initial; } /* Keep viz flush with the iframe — no padding/min-height so card matches the iframe's 16:9 aspect ratio exactly (no white space). */ html[data-surface="marketing"] .usecases__viz { min-height: 0; padding: 0; } } /* ------- USE-CASE STILL FRAMES (SS1) ------- Ramp-style product stills replace the looping iframes: real merchant names + amounts, the change happens INSIDE the card (repayment-term chip gets ✓-selected / payout row settles), children rise from below via the [data-stagger] reveal. */ html[data-surface="marketing"] .uc-frame{ --uc-indigo:#DFFF92; --uc-indigo-bg:#F4FAE5; --uc-ink:#000000; --uc-t2:#4A5163; --uc-t3:#8A92A6; --uc-line:#EAECF4; --uc-green:#000000; --uc-green-bg:#F4FAE5; --uc-lime:#DFFF92; position:relative; max-width:430px; margin:0 auto; padding:58px 34px; } html[data-surface="marketing"] .uc-card{ position:relative; background:#fff; border:1px solid var(--uc-line); border-radius:18px; box-shadow:0 24px 54px -24px rgba(16,36,62,.28); padding:18px; } html[data-surface="marketing"] .uc-card__head{display:flex;align-items:center;gap:11px;margin-bottom:14px} html[data-surface="marketing"] .uc-avatar{ flex:none;width:38px;height:38px;border-radius:11px; display:grid;place-items:center; font-family:var(--font-display);font-size:13px;font-weight:700;color:#000; background:linear-gradient(145deg,#F4FAE5,#DFFF92); } html[data-surface="marketing"] .uc-avatar--lime{background:linear-gradient(145deg,#E6FF85,#C2EC33);color:var(--uc-ink)} html[data-surface="marketing"] .uc-card__who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} html[data-surface="marketing"] .uc-card__who b{font-size:13.5px;font-weight:700;color:var(--uc-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-surface="marketing"] .uc-card__who span{font-size:11px;font-weight:600;color:var(--uc-t3)} html[data-surface="marketing"] .uc-amt{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--uc-ink);white-space:nowrap} html[data-surface="marketing"] .uc-terms{display:flex;gap:8px;margin-bottom:14px} html[data-surface="marketing"] .uc-term{ position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:5px; border:1px solid var(--uc-line);border-radius:10px;padding:9px 4px; font-size:11.5px;font-weight:700;color:var(--uc-t2);white-space:nowrap; } html[data-surface="marketing"] .uc-term--on{animation:ucSelect 6s var(--ease-out) infinite} html[data-surface="marketing"] .uc-term__tick{ display:flex;align-items:center;justify-content:center;flex:none; width:14px;height:14px;border-radius:50%; color:#fff;background:var(--uc-indigo); transform:scale(0);animation:ucTick 6s var(--ease-out) infinite; } @keyframes ucSelect{ 0%,12%{border-color:var(--uc-line);background:#fff;color:var(--uc-t2);box-shadow:none} 22%,88%{border-color:var(--uc-indigo);background:rgba(223, 255, 146,.07);color:var(--uc-ink);box-shadow:0 0 0 3px rgba(223, 255, 146,.12)} 96%,100%{border-color:var(--uc-line);background:#fff;color:var(--uc-t2);box-shadow:none} } @keyframes ucTick{ 0%,14%{transform:scale(0)} 24%,86%{transform:scale(1)} 94%,100%{transform:scale(0)} } html[data-surface="marketing"] .uc-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} html[data-surface="marketing"] .uc-row{ display:flex;align-items:center;justify-content:space-between;gap:10px; border:1px solid var(--uc-line);border-radius:10px;padding:9px 11px; font-size:11.5px;font-weight:600;color:var(--uc-t2); } html[data-surface="marketing"] .uc-row b{font-size:11.5px;font-weight:700;color:var(--uc-ink);white-space:nowrap} html[data-surface="marketing"] .uc-row--hl{border-color:#CDFF55;background:rgba(223, 255, 146,.30);animation:ucGlow 5s infinite} html[data-surface="marketing"] .uc-row--hl b{color:var(--uc-green)} @keyframes ucGlow{ 0%,30%{box-shadow:0 0 0 0 rgba(22,185,129,0)} 45%,70%{box-shadow:0 0 0 4px rgba(223, 255, 146,.45)} 90%,100%{box-shadow:0 0 0 0 rgba(22,185,129,0)} } html[data-surface="marketing"] .uc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px} html[data-surface="marketing"] .uc-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;border-radius:999px;padding:5px 10px} html[data-surface="marketing"] .uc-chip--green{color:var(--uc-green);background:var(--uc-green-bg)} html[data-surface="marketing"] .uc-chip svg{flex:none} html[data-surface="marketing"] .uc-due{font-size:11px;font-weight:600;color:var(--uc-t3)} html[data-surface="marketing"] .uc-float{ position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; background:#fff;border:1px solid var(--uc-line);border-radius:11px;padding:7px 11px; font-size:11px;font-weight:700;color:var(--uc-ink); box-shadow:0 16px 34px -18px rgba(16,36,62,.26); } html[data-surface="marketing"] .uc-float svg{flex:none} html[data-surface="marketing"] .uc-float--a{top:24px;left:6px} html[data-surface="marketing"] .uc-float--b{bottom:22px;right:8px} html[data-surface="marketing"] .uc-float--indigo{color:var(--uc-ink);background:#fff;border-color:var(--uc-line)} html[data-surface="marketing"] .uc-float--green{color:var(--uc-green);background:var(--uc-green-bg);border-color:transparent} @media (prefers-reduced-motion: reduce){ html[data-surface="marketing"] .uc-term--on,html[data-surface="marketing"] .uc-term__tick,html[data-surface="marketing"] .uc-row--hl{animation:none!important} html[data-surface="marketing"] .uc-term--on{border-color:var(--uc-indigo);background:rgba(223, 255, 146,.07);color:var(--uc-ink)} html[data-surface="marketing"] .uc-term__tick{transform:scale(1)} } @media (max-width: 540px){ html[data-surface="marketing"] .uc-frame{padding:46px 12px} html[data-surface="marketing"] .uc-float--a{left:0} html[data-surface="marketing"] .uc-float--b{right:0} } /* ------- CHOOSE PATH ------- */ html[data-surface="marketing"] .path { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; perspective: 1500px; } html[data-surface="marketing"] .path__cards { display: flex; flex-direction: column; gap: 16px; } html[data-surface="marketing"] .path__card { display: flex; justify-content: space-between; align-items: flex-start; padding: 32px; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); transition: transform .5s var(--ease-out), background .3s ease, border-color .3s ease; cursor: pointer; gap: 24px; color: var(--ink); position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-glass); will-change: transform; } html[data-surface="marketing"] .path__card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1.5px; background-image: radial-gradient(transparent 0%,transparent 30%,var(--shimmer-color, #DFFF92) 50%,transparent 70%,transparent 100%); background-size: 283% 283%; background-position: 153% 174%; animation: shimmer-border 10s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: inset 0 0 0 1.5px rgba(223, 255, 146,.1); filter: drop-shadow(0 0 8px rgba(223, 255, 146,.29)); } html[data-surface="marketing"] .path__card > * { position: relative; z-index: 1; } /* Pixel-art side art (SS2) — artistic grid-of-rounded-squares imagery (cart / storefront) in brand indigos + one lime accent. Replaces the old flat outline icons. On hover the pixels shimmer + reassemble, staggered per pixel — pure SVG/CSS. */ html[data-surface="marketing"] .path__px { flex: none; width: 84px; height: 84px; align-self: center; } html[data-surface="marketing"] .path__px svg { display: block; width: 100%; height: 100%; overflow: visible; } html[data-surface="marketing"] .path__px rect { transform-box: fill-box; transform-origin: center; } html[data-surface="marketing"] .path__card:hover .path__px rect { animation: pxPop .8s var(--ease-out) both; } html[data-surface="marketing"] .path__card:hover .path__px rect:nth-child(2n) { animation-delay: .05s; } html[data-surface="marketing"] .path__card:hover .path__px rect:nth-child(3n) { animation-delay: .11s; } html[data-surface="marketing"] .path__card:hover .path__px rect:nth-child(5n) { animation-delay: .17s; } html[data-surface="marketing"] .path__card:hover .path__px rect:nth-child(7n+2) { animation-delay: .23s; } @keyframes pxPop { 0% { transform: scale(1); } 35% { transform: scale(.25) rotate(45deg); opacity: .35; filter: brightness(1.35); } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); filter: none; } } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .path__card:hover .path__px rect { animation: none; } } @media (max-width: 540px) { html[data-surface="marketing"] .path__px { width: 60px; height: 60px; } } html[data-surface="marketing"] .path__card:hover { background: var(--glass-bg-hover); border-color: rgba(15, 23, 42, 0.14); } html[data-surface="marketing"] .path__card h4 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 10px; color: var(--ink); } html[data-surface="marketing"] .path__card p { color: var(--text-2); margin: 0; font-size: 14.5px; } html[data-surface="marketing"] .path__card .arrow-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--glass-border); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; transition: background .3s ease, color .3s ease, border-color .3s ease; } html[data-surface="marketing"] .path__card:hover .arrow-circle { color: #0a0a14; border-color: rgba(15,23,42,.22); transform: translateX(3px); } @media (max-width: 900px) { html[data-surface="marketing"] .path { grid-template-columns: 1fr; } } /* ------- INTEGRATIONS ------- */ html[data-surface="marketing"] .integrations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; perspective: 1200px; } html[data-surface="marketing"] .integ { display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform .6s var(--ease-out), scale .35s var(--ease-out), opacity .35s var(--ease-out); will-change: transform; scale: 1; opacity: 1; } html[data-surface="marketing"] .integ__img { height: 280px; background-size: cover; background-position: center; border-radius: var(--radius-lg); margin-bottom: 20px; position: relative; overflow: hidden; transform: translateZ(0); transform-style: preserve-3d; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); box-shadow: var(--shadow-glass); } html[data-surface="marketing"] .integ:hover .integ__img { transform: translateZ(40px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 10px 20px -10px rgba(0, 0, 0, 0.4); border-color: rgba(15, 23, 42, 0.18); } /* Spotlight effect: when any card in the row is being hovered, the others shrink to focus attention on the active one. We use the standalone `scale` property (not `transform: scale()`) because the [data-tilt-3d] JS sets an inline `transform` on every card at init — `scale` composes with that instead of conflicting. */ html[data-surface="marketing"] .integrations:hover .integ:not(:hover) { scale: 0.92; opacity: 0.7; transition: scale .35s var(--ease-out), opacity .35s var(--ease-out); } html[data-surface="marketing"] .integ__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),rgba(223, 255, 146,.35),rgba(223, 255, 146,0) 45%); opacity: 0; transition: opacity .35s var(--ease-out); mix-blend-mode: screen; } html[data-surface="marketing"] .integ:hover .integ__glare { opacity: 1; } html[data-surface="marketing"] .integ h4 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 0 0 8px; color: var(--ink); transform: translateZ(20px); transition: transform .6s var(--ease-out); } html[data-surface="marketing"] .integ p { color: var(--text-2); font-size: 14px; margin: 0; transform: translateZ(12px); transition: transform .6s var(--ease-out); } @media (hover: none) { html[data-surface="marketing"] .integ,html[data-surface="marketing"] .integ__img,html[data-surface="marketing"] .integ h4,html[data-surface="marketing"] .integ p { transform: none !important; } } @media (max-width: 900px) { html[data-surface="marketing"] .integrations { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { html[data-surface="marketing"] .integrations { grid-template-columns: 1fr; } } /* ------- TESTIMONIALS ------- */ html[data-surface="marketing"] .testimonials__viewport { overflow: hidden; } html[data-surface="marketing"] .testimonials__track { display: flex; gap: 20px; padding: 0 32px; cursor: grab; will-change: transform; } html[data-surface="marketing"] .testimonials__track:active { cursor: grabbing; } html[data-surface="marketing"] .tcard { flex: 0 0 280px; display: flex; flex-direction: column; gap: 16px; } html[data-surface="marketing"] .tcard__media { height: 360px; border-radius: var(--radius); background-size: cover; background-position: center; position: relative; overflow: hidden; border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); box-shadow: var(--shadow-glass); } html[data-surface="marketing"] .tcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45) 100%); } html[data-surface="marketing"] .tcard__play { position: absolute; bottom: 16px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #0a0a14; display: grid; place-items: center; z-index: 1; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 0 24px var(--accent-glow); } html[data-surface="marketing"] .tcard:hover .tcard__play { transform: scale(1.1); box-shadow: 0 0 36px var(--accent-glow); } html[data-surface="marketing"] .tcard[data-video] { cursor: pointer; } html[data-surface="marketing"] .tcard[data-video] .tcard__media { transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); } html[data-surface="marketing"] .tcard[data-video]:hover .tcard__media { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); border-color: rgba(15, 23, 42, 0.18); } /* ============ TGRID: testimonial 2-row filmstrip ============ Layout: fixed title card on the left (col 1) + ONE 2-row CSS GRID of merchant cards sharing ONE scrollport (.tgrid__strip) so they scroll together like a filmstrip (grid-auto-flow: column dense — odd children fill the top row, even the bottom). Each card is a poster still with a slow Ken Burns drift. Click a card → it grows to span BOTH rows (full strip height) at a 9:16-friendly width; `dense` re-slots the neighbors around it with zero overlap and JS FLIP-animates the reflow. JS appends clone sets after the originals for the auto-scroll marquee wrap. */ html[data-surface="marketing"] .tgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px; --tcard-w: 205px; /* resting card width */ --tcard-h: calc(var(--tcard-w) * 4 / 3); /* constant per-row height (3:4) */ --tgrid-gap: 10px; /* row/column gap inside the strip */ /* Expanded (playing) card: full strip height (both rows + the gap) at an exact 9:16 width — the testimonial videos are 9:16, so object-fit:cover fills the card with essentially zero crop and zero letterboxing. */ --tcard-tall-h: calc(var(--tcard-h) * 2 + var(--tgrid-gap)); --tcard-tall-w: calc(var(--tcard-tall-h) * 9 / 16); } /* Scroller shell: hosts the strip + the two overlay nav arrows. */ html[data-surface="marketing"] .tgrid__scroller { position: relative; min-width: 0; } /* The single scrollport: a 2-row grid filling column by column, so both rows pan together. `dense` lets cards backfill the hole left when a playing card re-slots to span both rows. Columns size to their content (max-content) so the one wide playing card gets a wide column while every other column stays at the resting card width. */ html[data-surface="marketing"] .tgrid__strip { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--tcard-h)); grid-auto-columns: max-content; gap: var(--tgrid-gap); /* breathing room so card glass shadows aren't clipped by the scrollport */ padding: 10px 0; margin: -10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox: no scrollbar */ /* Soft fade on whichever edge still has content beyond it (JS toggles can-prev / can-next on the scroller). */ --fade-start: 0px; --fade-end: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); } html[data-surface="marketing"] .tgrid__strip::-webkit-scrollbar { display: none; } /* Cards pinned to their row (odd = top, even = bottom): when a card expands to span both rows, each row's remaining cards slide HORIZONTALLY within their own row — nobody jumps between rows. (.is-playing overrides with grid-row: 1/-1 further down.) */ html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(odd) { grid-row: 1; } html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(even) { grid-row: 2; } html[data-surface="marketing"][dir="rtl"] .tgrid__strip { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); } html[data-surface="marketing"] .tgrid__scroller.can-prev .tgrid__strip { --fade-start: 48px; } html[data-surface="marketing"] .tgrid__scroller.can-next .tgrid__strip { --fade-end: 48px; } /* Prev/next arrows: round glass chips overlaying the row's inline edges. Logical inset properties keep them dir-aware; the chevron glyph is mirrored for RTL below. Hidden (is-off) at the respective end. */ html[data-surface="marketing"] .tgrid__nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; z-index: 4; cursor: pointer; padding: 0; color: var(--ink); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); box-shadow: var(--shadow-glass); transition: background .2s ease, color .2s ease, transform .2s ease, opacity .25s ease, visibility .25s ease; } html[data-surface="marketing"] .tgrid__nav[hidden] { display: none; } /* pre-JS state */ html[data-surface="marketing"] .tgrid__nav--prev { inset-inline-start: 12px; } html[data-surface="marketing"] .tgrid__nav--next { inset-inline-end: 12px; } html[data-surface="marketing"] .tgrid__nav:hover { background: var(--bg-tint); color: var(--ink); transform: scale(1.12); } html[data-surface="marketing"] .tgrid__nav svg { display: block; } html[data-surface="marketing"][dir="rtl"] .tgrid__nav svg { transform: scaleX(-1); } html[data-surface="marketing"] .tgrid__nav.is-off { opacity: 0; visibility: hidden; pointer-events: none; } html[data-surface="marketing"] .tgrid__title { grid-column: 1; grid-row: 1; /* single row: stretches to the rotor height (no empty 2nd row / bottom gap) */ display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px 28px; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); } html[data-surface="marketing"] .tgrid__title h2 { margin: 0; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.05; } html[data-surface="marketing"] .tgrid__title .lead { color: var(--text-2); font-size: 14px; margin: 0; } html[data-surface="marketing"] .tgrid__title .eyebrow { margin-bottom: 0; } /* Each card is a fixed-width 3:4 portrait with the merchant's poster photo full-bleed behind the caption. Sizing is explicit width/height (the grid column tracks are max-content, so a card IS its column) — the JS FLIP animates all size/position changes, so no CSS size transitions here. */ html[data-surface="marketing"] .tgrid__strip > .tcard { width: var(--tcard-w); height: var(--tcard-h); min-width: 0; aspect-ratio: auto; margin: 0; display: block; cursor: pointer; } /* Card face: merchant poster still, full-bleed, with a slow Ken Burns drift. */ html[data-surface="marketing"] .tgrid__strip > .tcard > .tcard__media { height: 100%; margin: 0; border-radius: var(--radius); background-color: #10141C; background-image: none; border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); position: relative; overflow: hidden; } /* Poster still extracted from each testimonial video — CSS-only motion (scale 1 → 1.08, ~12s, alternating) so cells feel alive without any autoplaying video. */ html[data-surface="marketing"] .tcard__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; animation: tcardKenBurns 12s ease-in-out infinite alternate; will-change: transform; } @keyframes tcardKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } /* Desynchronise the drift so the strip doesn't breathe in unison. Cards are interleaved column-major (odd = top row, even = bottom row) and one clone set is 6 cards, so a 6-card delay pattern keeps a card and its marquee clones in the SAME animation phase — the wrap jump stays invisible. */ html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(6n+2) .tcard__poster { animation-delay: -2s; } html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(6n+3) .tcard__poster { animation-delay: -4s; } html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(6n+4) .tcard__poster { animation-delay: -6s; } html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(6n+5) .tcard__poster { animation-delay: -8s; } html[data-surface="marketing"] .tgrid__strip > .tcard:nth-child(6n) .tcard__poster { animation-delay: -10s; } html[data-surface="marketing"] .tcard.is-playing .tcard__poster { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { html[data-surface="marketing"] .tcard__poster { animation: none; } html[data-surface="marketing"] .tgrid__strip { scroll-behavior: auto; } html[data-surface="marketing"] .tgrid__strip > .tcard { transition: none; } /* instant expand/collapse (JS skips FLIP too) */ } /* Caption overlay: name + role pinned to the bottom over a soft gradient, quote as a smaller secondary line (injected by JS, matched to the video). */ html[data-surface="marketing"] .tcard__caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 16px; padding-right: 60px; /* keep clear of the play button */ text-align: left; pointer-events: none; transition: transform .25s ease; z-index: 2; } html[data-surface="marketing"] .tcard__who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } html[data-surface="marketing"] .tcard__who strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: -0.01em; line-height: 1.15; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); } html[data-surface="marketing"] .tcard__who span { font-size: 12px; color: rgba(255, 255, 255, 0.78); line-height: 1.3; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } html[data-surface="marketing"] .tcard p.tcard__quote { margin: 0; font-style: italic; font-weight: 300; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } html[data-surface="marketing"] .tgrid__strip > .tcard:hover > .tcard__media .tcard__caption { transform: scale(1.02); } /* Fade the caption out once the video starts playing. */ html[data-surface="marketing"] .tcard.is-playing .tcard__caption,html[data-surface="marketing"] .tcard__media.is-playing .tcard__caption { opacity: 0; } /* Soft bottom gradient so the white caption stays legible on any poster. */ html[data-surface="marketing"] .tgrid__strip > .tcard > .tcard__media::after { display: block; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0.78) 100%); z-index: 1; } /* Play affordance sits bottom-right, clear of the caption text. */ html[data-surface="marketing"] .tgrid__strip > .tcard > .tcard__media .tcard__play { left: auto; right: 14px; bottom: 14px; z-index: 3; } html[data-surface="marketing"] .tgrid__strip > .tcard > h4,html[data-surface="marketing"] .tgrid__strip > .tcard > p { display: none; } /* Expanded (playing): the card spans BOTH grid rows (full strip height) at an exact 9:16 width. Row-pinned cards (odd/even) slide horizontally in their own row to make room — nothing overlaps — and the JS FLIP glides every card (position AND the playing card's size) to its new slot. The 9:16 video fills the card edge-to-edge (cover, ~zero crop, no letterboxing). */ html[data-surface="marketing"] .tgrid__strip > .tcard.is-playing { grid-row: 1 / -1; width: var(--tcard-tall-w); height: var(--tcard-tall-h); } html[data-surface="marketing"] .tgrid__strip > .tcard.is-playing .tcard__video { object-fit: cover; } @media (max-width: 1100px) { html[data-surface="marketing"] .tgrid { grid-template-columns: 240px minmax(0, 1fr); } } @media (max-width: 900px) { /* Stack the title above the strip; the strip stays a native touch scroller. Videos open in the .tvpop fullscreen popup (cards never expand inline), so the arrows are dropped in favour of swiping. */ html[data-surface="marketing"] .tgrid { grid-template-columns: 1fr; --tcard-w: 168px; } html[data-surface="marketing"] .tgrid__title { grid-column: 1; grid-row: auto; padding: 24px; } html[data-surface="marketing"] .tgrid__nav { display: none; } } /* Inline video — when playing, the