/* ============================================================ landing.css — Public Reglio landing page Scoped entirely under .landing-page so nothing here can leak into the authenticated dashboard. Written with CSS logical properties (inline-start/end) so the whole page mirrors correctly when is set for Arabic. ============================================================ */ /* The app shell locks scrolling (html,body{overflow:hidden}). The landing page is a long scrolling document, so it opts out. */ html.landing-mode { overflow: auto; overflow-x: hidden; height: auto; min-height: 100%; scroll-behavior: smooth; } /* body deliberately gets NO overflow value on either axis except `clip`. Giving body `overflow: auto` makes it a scroll container while is what actually scrolls, so the sticky nav resolves against a box that never moves and scrolls away with the page. `overflow-x: clip` paired with `overflow-y: visible` is the one combination that contains horizontal overflow without creating a scroll container. */ html.landing-mode body { overflow-x: clip; overflow-y: visible; height: auto; min-height: 100%; scroll-behavior: smooth; } html.landing-mode { scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html.landing-mode, html.landing-mode body { scroll-behavior: auto; } } .landing-page { /* Names unchanged so every existing var(--lp-*) call site is untouched. They resolve through brand.css now; the rendered values are identical. */ --lp-bg: var(--brand-canvas); --lp-bg-raised: var(--brand-canvas-raised); --lp-ink: var(--brand-ink); --lp-ink-soft: var(--brand-ink-soft); --lp-ink-faint: var(--brand-ink-faint); --lp-line: var(--brand-hairline); --lp-line-strong: var(--brand-hairline-strong); --lp-orange: var(--brand-accent); --lp-orange-deep: var(--brand-accent-deep); --lp-orange-tint: var(--brand-accent-tint); --lp-dark: var(--brand-dark); --lp-dark-raised: var(--brand-dark-raised); --lp-dark-line: var(--brand-dark-line); --lp-dark-ink: var(--brand-dark-ink); --lp-white: var(--brand-surface); --lp-r-sm: var(--brand-radius-marketing-sm); --lp-r: var(--brand-radius-marketing); --lp-r-lg: var(--brand-radius-marketing-lg); --lp-r-xl: var(--brand-radius-marketing-xl); --lp-pill: var(--brand-radius-pill); --lp-ease: var(--brand-ease); --lp-ease-io: var(--brand-ease-io); --lp-nav-h: var(--brand-nav-height); position: relative; isolation: isolate; background: var(--lp-bg); color: var(--lp-ink); font-family: var(--brand-font); font-weight: 500; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; } html.lang-ar .landing-page { font-family: var(--brand-font-arabic); line-height: 1.75; } .landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; } .landing-page h1, .landing-page h2, .landing-page h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } html.lang-ar .landing-page h1, html.lang-ar .landing-page h2, html.lang-ar .landing-page h3 { letter-spacing: 0; line-height: 1.32; } .landing-page p { color: var(--lp-ink-soft); } .landing-page img { max-width: 100%; display: block; } /* :where() keeps this reset at zero specificity, so a single-class button style like .landing-button-orange still wins its background and colour. */ :where(.landing-page button) { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } .landing-container { width: min(1200px, 100% - 48px); margin-inline: auto; } @media (max-width: 640px) { .landing-container { width: min(1200px, 100% - 32px); } } /* ── Scroll reveal ────────────────────────────────────────── */ .landing-page [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--lp-ease) var(--reveal-delay, 0ms), transform 0.8s var(--lp-ease) var(--reveal-delay, 0ms), filter 0.8s var(--lp-ease) var(--reveal-delay, 0ms); filter: blur(6px); will-change: opacity, transform; } .landing-page [data-reveal="start"] { transform: translate(-30px, 0); } .landing-page [data-reveal="end"] { transform: translate(30px, 0); } .landing-page [data-reveal="scale"] { transform: scale(0.94); } .landing-page [data-reveal="fade"] { transform: none; } .landing-page [data-reveal].is-in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .landing-page [data-reveal], .landing-page [data-reveal].is-in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .landing-page *, .landing-page *::before, .landing-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ── Buttons ──────────────────────────────────────────────── */ .landing-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: var(--lp-pill); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease), background-color 0.35s var(--lp-ease), color 0.35s var(--lp-ease); } .landing-button svg { width: 19px; height: 19px; flex: none; transition: transform 0.4s var(--lp-ease); } /* The arrow always points "forward" in the reading direction. */ [dir="rtl"] .landing-button svg { transform: scaleX(-1); } .landing-button:hover svg { transform: translateX(4px); } [dir="rtl"] .landing-button:hover svg { transform: scaleX(-1) translateX(4px); } .landing-button::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 60%); opacity: 0; transition: opacity 0.35s var(--lp-ease); pointer-events: none; } .landing-button:hover::after { opacity: 1; } .landing-button-orange { background: var(--lp-orange); color: var(--lp-white); box-shadow: 0 10px 26px -10px rgba(255, 90, 34, 0.85); } .landing-button-orange:hover { background: var(--lp-orange-deep); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(255, 90, 34, 0.95); } /* Only when REGLIO_CONFIG.brand = "drivewealth" */ html[data-brand="drivewealth"] .landing-button-orange { color: var(--lp-ink); box-shadow: 0 10px 26px -10px rgba(254, 193, 9, 0.75); } html[data-brand="drivewealth"] .landing-button-orange:hover { box-shadow: 0 18px 38px -12px rgba(254, 193, 9, 0.9); } html[data-brand="drivewealth"] .landing-capability-featured .landing-capability-icon { color: var(--lp-ink); } /* .landing-brand img is sized for reglio.png, which is ~65% transparent padding — a 68px box there renders a ~24px wordmark. The DriveWealth mark is tightly cropped, so the same box renders it at the full 68px and, at roughly 7:1, over 400px wide. On a phone that overflows the nav and pushes the language toggle and menu button past the edge. Size to match Reglio's *visible* weight and cap the width so the controls stay reachable in portrait. */ html[data-brand="drivewealth"] .landing-brand img { height: clamp(20px, 2.6vw, 26px); max-width: min(200px, 48vw); object-fit: contain; } /* Only when the brand is "geniustrader" */ html[data-brand="geniustrader"] .landing-button-orange { color: var(--lp-ink); box-shadow: 0 10px 26px -10px rgba(255, 240, 23, 0.75); } html[data-brand="geniustrader"] .landing-button-orange:hover { box-shadow: 0 18px 38px -12px rgba(255, 240, 23, 0.9); } html[data-brand="geniustrader"] .landing-capability-featured .landing-capability-icon { color: var(--lp-ink); } /* Same reasoning as DriveWealth above, different geometry: the Genius mark is an icon beside two lines of text at roughly 16:9, so it needs more height than a single-line wordmark but far less width. */ html[data-brand="geniustrader"] .landing-brand img { height: clamp(30px, 3.6vw, 40px); max-width: min(180px, 44vw); object-fit: contain; } .landing-button-dark { background: var(--lp-dark); color: var(--lp-white); } .landing-button-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.7); } .landing-button-small { padding: 11px 20px; font-size: 14px; } .landing-button:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 3px; } /* ── Navigation ───────────────────────────────────────────── */ .landing-nav-shell { position: sticky; top: 0; z-index: 60; /* backdrop-filter is deliberately NOT transitioned. Animating a backdrop blur forces the browser to re-sample and re-blur everything beneath the bar on every frame, and it fires exactly as you start scrolling — which showed up as a single ~77ms stutter at the top of the page. The blur still applies, it just snaps in with the background instead of being animated. */ transition: background-color 0.4s var(--lp-ease), box-shadow 0.4s var(--lp-ease); } .landing-nav-shell.is-scrolled { background: rgba(241, 240, 235, 0.78); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 var(--lp-line), 0 12px 30px -24px rgba(0, 0, 0, 0.5); } .landing-nav { width: min(1200px, 100% - 48px); margin-inline: auto; height: var(--lp-nav-h); display: flex; align-items: center; gap: 20px; } @media (max-width: 640px) { .landing-nav { width: min(1200px, 100% - 32px); } } .landing-brand { flex: none; display: flex; align-items: center; padding: 4px; border-radius: var(--lp-r-sm); } /* reglio.png is 3508x2481, but the visible wordmark is only 3034x860 of that — roughly 35% of the box height, the rest transparent padding. So the box has to be sized ~3x the intended mark height: at 68px the wordmark renders about 24px tall, which is the right weight against a 76px nav. The source is huge, so it stays crisp. Still shorter than --lp-nav-h, so the row never grows. */ .landing-brand img { height: clamp(52px, 4.8vw, 68px); width: auto; transition: transform 0.4s var(--lp-ease); } .landing-brand:hover img { transform: scale(1.05); } .landing-nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 26px; margin-inline-end: auto; } .landing-nav-links button { position: relative; padding: 9px 14px; font-size: 14.5px; font-weight: 500; color: var(--lp-ink-soft); border-radius: var(--lp-r-sm); transition: color 0.3s var(--lp-ease); } .landing-nav-links button::after { content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--lp-orange); transform: scaleX(0); transform-origin: var(--lp-origin, left); transition: transform 0.4s var(--lp-ease); } [dir="rtl"] .landing-nav-links button::after { transform-origin: right; } .landing-nav-links button:hover { color: var(--lp-ink); } .landing-nav-links button:hover::after, .landing-nav-links button.is-active::after { transform: scaleX(1); } .landing-nav-links button.is-active { color: var(--lp-orange); font-weight: 600; } .landing-nav-actions { display: flex; align-items: center; gap: 12px; flex: none; } /* Language segmented switch — sliding thumb between AR and EN */ .landing-lang-switch { position: relative; display: inline-flex; align-items: center; padding: 3px; border-radius: var(--lp-pill); background: rgba(19, 19, 18, 0.05); border: 1px solid var(--lp-line); } .landing-lang-switch .landing-lang-thumb { position: absolute; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: var(--lp-pill); background: var(--lp-white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); transition: transform 0.45s var(--lp-ease); inset-inline-start: 3px; } .landing-lang-switch[data-lang="ar"] .landing-lang-thumb { transform: translateX(0); } .landing-lang-switch[data-lang="en"] .landing-lang-thumb { transform: translateX(100%); } [dir="rtl"] .landing-lang-switch[data-lang="en"] .landing-lang-thumb { transform: translateX(-100%); } .landing-lang-switch button { position: relative; z-index: 1; min-width: 42px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--lp-ink-faint); border-radius: var(--lp-pill); transition: color 0.35s var(--lp-ease); } .landing-lang-switch button.is-active { color: var(--lp-ink); } /* Nav CTA — circular icon that expands to reveal its label on hover */ .landing-nav-cta { display: inline-flex; align-items: center; gap: 0; height: 42px; padding: 0; width: 42px; border-radius: var(--lp-pill); background: var(--lp-dark); color: var(--lp-white); overflow: hidden; transition: width 0.5s var(--lp-ease), gap 0.5s var(--lp-ease), background-color 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease); } .landing-nav-cta .landing-nav-cta-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; } .landing-nav-cta svg { width: 18px; height: 18px; transition: transform 0.45s var(--lp-ease); } [dir="rtl"] .landing-nav-cta svg { transform: scaleX(-1); } .landing-nav-cta .landing-nav-cta-label { max-width: 0; opacity: 0; font-size: 14px; font-weight: 600; white-space: nowrap; transition: max-width 0.5s var(--lp-ease), opacity 0.35s var(--lp-ease), padding 0.5s var(--lp-ease); padding-inline-end: 0; } .landing-nav-cta:hover, .landing-nav-cta:focus-visible { width: auto; background: var(--lp-orange); box-shadow: 0 12px 26px -12px rgba(255, 90, 34, 0.9); } .landing-nav-cta:hover .landing-nav-cta-label, .landing-nav-cta:focus-visible .landing-nav-cta-label { max-width: 240px; opacity: 1; padding-inline-end: 20px; } .landing-menu-button { display: none; width: 42px; height: 42px; border-radius: var(--lp-pill); background: rgba(19, 19, 18, 0.05); border: 1px solid var(--lp-line); place-items: center; } .landing-menu-button span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: var(--lp-ink); transition: transform 0.4s var(--lp-ease), opacity 0.25s var(--lp-ease); } .landing-menu-button span + span { margin-top: 4px; } .landing-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); } .landing-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .landing-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); } .landing-mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 0 24px; max-height: 0; overflow: hidden; background: rgba(241, 240, 235, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: max-height 0.5s var(--lp-ease), padding 0.5s var(--lp-ease), border-color 0.4s var(--lp-ease); } .landing-mobile-menu.is-open { max-height: 420px; padding: 8px 24px 22px; border-bottom-color: var(--lp-line); } .landing-mobile-menu > button { text-align: start; padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--lp-ink); border-bottom: 1px solid var(--lp-line); } .landing-mobile-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .landing-mobile-actions .landing-button { flex: 1; } @media (max-width: 980px) { .landing-nav-links { display: none; } .landing-menu-button { display: grid; } .landing-nav-actions .landing-nav-cta { display: none; } .landing-nav-links { margin-inline-end: 0; } .landing-nav { justify-content: space-between; } .landing-nav-actions { margin-inline-start: auto; } .landing-mobile-menu { display: flex; } } /* ── Hero ─────────────────────────────────────────────────── */ .landing-hero { position: relative; padding-top: 58px; padding-bottom: 110px; overflow: hidden; background: radial-gradient(120% 80% at 88% -10%, rgba(255, 90, 34, 0.13), transparent 55%), linear-gradient(180deg, #FBF9F5 0%, var(--lp-bg) 62%); } .landing-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--lp-line) 1px, transparent 1px), linear-gradient(90deg, var(--lp-line) 1px, transparent 1px); background-size: 78px 78px; mask-image: radial-gradient(80% 60% at 50% 20%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000 0%, transparent 78%); opacity: 0.6; pointer-events: none; } .landing-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; /* These are large, permanently animating and heavily blurred. Promoting them to their own compositor layer lets the blur be rasterized once and then just moved, instead of being repainted underneath the sticky nav. */ will-change: transform; } .landing-hero-glow-one { width: 520px; height: 520px; inset-inline-end: -140px; top: -180px; background: rgba(255, 90, 34, 0.20); animation: lp-drift 18s var(--lp-ease-io) infinite alternate; } .landing-hero-glow-two { width: 420px; height: 420px; inset-inline-start: -160px; bottom: -160px; background: rgba(255, 141, 92, 0.16); animation: lp-drift 22s var(--lp-ease-io) infinite alternate-reverse; } @keyframes lp-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 40px, 0) scale(1.12); } } .landing-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: 64px; } .landing-hero-copy h1 { font-size: clamp(40px, 5.4vw, 68px); margin-bottom: 22px; } .landing-hero-copy h1 span { color: var(--lp-orange); display: inline-block; } .landing-hero-copy > p { font-size: clamp(15.5px, 1.25vw, 17.5px); max-width: 46ch; margin-bottom: 32px; } .landing-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .landing-proof-row { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; font-weight: 500; color: var(--lp-ink-soft); } .landing-proof-row span { display: inline-flex; align-items: center; gap: 8px; } .landing-proof-row svg { width: 17px; height: 17px; color: var(--lp-orange); flex: none; } /* Hero visual — dashboard mock */ .landing-hero-visual { position: relative; display: grid; place-items: center; min-height: 460px; perspective: 1400px; } .landing-orbit { position: absolute; border: 1px solid var(--lp-line-strong); border-radius: 50%; pointer-events: none; opacity: 0.55; } .landing-orbit-one { width: 520px; height: 520px; border-style: dashed; animation: lp-spin 58s linear infinite; } .landing-orbit-two { width: 700px; height: 700px; animation: lp-spin 90s linear infinite reverse; } @keyframes lp-spin { to { transform: rotate(360deg); } } .landing-dashboard-window { position: relative; z-index: 2; width: 100%; max-width: 560px; background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); box-shadow: 0 40px 90px -50px rgba(19, 19, 18, 0.55), 0 6px 20px -12px rgba(19, 19, 18, 0.18); overflow: hidden; transform: translate3d(0, 0, 0) scale(1); transition: transform 0.9s var(--lp-ease), box-shadow 0.6s var(--lp-ease); } /* Sits flat by default; lifts slightly toward the pointer on hover. */ .landing-hero-visual:hover .landing-dashboard-window { transform: translate3d(0, -8px, 0) scale(1.012); box-shadow: 0 54px 110px -50px rgba(19, 19, 18, 0.6); } .landing-window-topbar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--lp-line); background: var(--lp-bg-raised); } .landing-window-brand img { height: 17px; width: auto; } .landing-window-tabs { display: flex; gap: 7px; margin-inline: auto; } .landing-window-tabs span { width: 34px; height: 5px; border-radius: 3px; background: var(--lp-line-strong); } .landing-window-tabs span.active { background: var(--lp-orange); width: 46px; } .landing-window-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--lp-dark); color: var(--lp-white); display: grid; place-items: center; font-size: 10px; font-weight: 700; } .landing-window-content { padding: 18px; display: grid; gap: 14px; } .landing-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .landing-preview-heading small { display: block; font-size: 10.5px; color: var(--lp-ink-faint); margin-bottom: 3px; } .landing-preview-heading strong { font-size: 15.5px; font-weight: 700; } .landing-preview-heading button { padding: 7px 13px; border-radius: var(--lp-r-sm); background: var(--lp-dark); color: var(--lp-white); font-size: 11.5px; font-weight: 600; } .landing-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .landing-kpi-grid article { position: relative; padding: 12px 13px; border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); background: var(--lp-bg-raised); } .landing-kpi-grid small { display: block; font-size: 10.5px; color: var(--lp-ink-faint); margin-bottom: 4px; } .landing-kpi-grid strong { font-size: 21px; font-weight: 700; } .landing-kpi-grid i { position: absolute; top: 12px; inset-inline-end: 12px; width: 6px; height: 6px; border-radius: 50%; } .landing-kpi-grid i.success { background: #12B76A; } .landing-kpi-grid i.warning { background: #F79009; } .landing-kpi-grid i.danger { background: var(--lp-orange); } .landing-preview-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; } .landing-card-label { font-size: 10.5px; color: var(--lp-ink-faint); margin-bottom: 10px; } .landing-chart-card, .landing-status-card { padding: 13px; border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); background: var(--lp-bg-raised); } .landing-chart-lines { position: relative; height: 96px; } .landing-chart-lines > span { position: absolute; inset-inline: 0; height: 1px; background: var(--lp-line); } .landing-chart-lines > span:nth-of-type(1) { top: 20%; } .landing-chart-lines > span:nth-of-type(2) { top: 52%; } .landing-chart-lines > span:nth-of-type(3) { top: 84%; } .landing-chart-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; } [dir="rtl"] .landing-chart-lines svg { transform: scaleX(-1); } .landing-chart-lines path { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); } .landing-chart-lines.is-drawn path { animation: lp-draw 1.9s var(--lp-ease) forwards; } .landing-chart-lines.is-drawn path:nth-of-type(2) { animation-delay: 0.22s; } @keyframes lp-draw { to { stroke-dashoffset: 0; } } .landing-status-item { display: flex; align-items: center; gap: 9px; padding: 7px 0; } .landing-status-item + .landing-status-item { border-top: 1px solid var(--lp-line); } .landing-status-item > div { flex: 1; min-width: 0; } .landing-status-avatar { width: 25px; height: 25px; border-radius: 50%; background: rgba(19, 19, 18, 0.07); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex: none; } .landing-status-item b { display: block; font-size: 11.5px; font-weight: 600; } .landing-status-item small { display: block; font-size: 10px; color: var(--lp-ink-faint); } .landing-status-item i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .landing-status-item i.success { background: #12B76A; } .landing-status-item i.warning { background: #F79009; } .landing-floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 15px; background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r); box-shadow: 0 22px 44px -26px rgba(19, 19, 18, 0.5); } .landing-floating-card small { display: block; font-size: 10px; color: var(--lp-ink-faint); } .landing-floating-card strong { display: block; font-size: 12.5px; font-weight: 700; } /* Pulled clear of the window edges so the mock's own labels stay readable in both reading directions. */ .landing-floating-card-top { top: 1%; inset-inline-start: -7%; animation: lp-float 7s var(--lp-ease-io) infinite alternate; } .landing-floating-card-bottom { bottom: 4%; inset-inline-end: -7%; animation: lp-float 8.5s var(--lp-ease-io) 0.6s infinite alternate-reverse; } @keyframes lp-float { from { transform: translateY(0); } to { transform: translateY(-16px); } } .landing-mini-icon { width: 28px; height: 28px; border-radius: 9px; background: var(--lp-orange); color: var(--lp-white); display: grid; place-items: center; flex: none; } .landing-mini-icon svg { width: 16px; height: 16px; } .landing-pulse { width: 10px; height: 10px; border-radius: 50%; background: #12B76A; flex: none; position: relative; } .landing-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #12B76A; animation: lp-pulse 2.2s var(--lp-ease-io) infinite; } @keyframes lp-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3.2); opacity: 0; } } @media (max-width: 1080px) { .landing-hero-grid { grid-template-columns: 1fr; gap: 52px; } .landing-hero-copy > p { max-width: 60ch; } .landing-hero-visual { min-height: 400px; } .landing-dashboard-window { --lp-tilt-y: 0deg; --lp-tilt-x: 0deg; } .landing-orbit-two { display: none; } } @media (max-width: 720px) { .landing-hero { padding-bottom: 76px; } .landing-preview-main { grid-template-columns: 1fr; } /* Straddle the window's top/bottom edges rather than covering its rows. */ .landing-floating-card-top { top: -3%; inset-inline-start: -2%; } .landing-floating-card-bottom { bottom: -3%; inset-inline-end: -2%; } .landing-orbit-one { width: 400px; height: 400px; } } @media (max-width: 460px) { .landing-floating-card { padding: 9px 12px; } .landing-floating-card strong { font-size: 11.5px; } } /* ── Sections ─────────────────────────────────────────────── */ .landing-section { padding: 108px 0; } .landing-section-dark { background: var(--lp-dark); color: var(--lp-white); } .landing-section-dark p { color: var(--lp-dark-ink); } .landing-section-heading { max-width: 720px; margin-bottom: 58px; } .landing-section-heading-centered { margin-inline: auto; text-align: center; } .landing-section-heading > span { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-orange); margin-bottom: 16px; } html.lang-ar .landing-section-heading > span { letter-spacing: 0; } .landing-section-heading h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; } .landing-section-heading p { font-size: clamp(15px, 1.15vw, 17px); } .landing-section-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-orange); margin-bottom: 16px; } html.lang-ar .landing-section-label { letter-spacing: 0; } /* Platform (dark) */ .landing-platform-heading { text-align: center; max-width: 900px; margin: 0 auto 64px; } .landing-platform-heading h2 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 18px; } .landing-platform-heading p { color: var(--lp-orange); font-size: clamp(14px, 1.1vw, 16px); font-weight: 600; } .landing-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .landing-problem-grid article { position: relative; padding: 32px 28px 30px; border: 1px solid var(--lp-dark-line); border-radius: var(--lp-r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); overflow: hidden; transition: transform 0.5s var(--lp-ease), border-color 0.5s var(--lp-ease), background-color 0.5s var(--lp-ease); } .landing-problem-grid article::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--lp-orange), transparent); transform: scaleX(0); transform-origin: inline-start; transition: transform 0.6s var(--lp-ease); } .landing-problem-grid article:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.24); } .landing-problem-grid article:hover::before { transform: scaleX(1); } .landing-problem-grid span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--lp-orange); margin-bottom: 18px; } .landing-problem-grid h3 { font-size: 20px; margin-bottom: 10px; } .landing-problem-grid p { font-size: 14.5px; } /* Capability grid */ .landing-orchestration { background: var(--lp-bg); } .landing-capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .landing-capability-card { position: relative; display: flex; flex-direction: column; padding: 34px; min-height: 300px; background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl); transition: transform 0.55s var(--lp-ease), box-shadow 0.55s var(--lp-ease), border-color 0.55s var(--lp-ease); } .landing-capability-card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -44px rgba(19, 19, 18, 0.55); border-color: var(--lp-line-strong); } .landing-capability-featured { background: var(--lp-dark); color: var(--lp-white); border-color: transparent; } .landing-capability-featured p { color: var(--lp-dark-ink); } .landing-capability-icon { position: absolute; top: 28px; inset-inline-end: 28px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(19, 19, 18, 0.055); color: var(--lp-ink); transition: transform 0.5s var(--lp-ease), background-color 0.4s var(--lp-ease), color 0.4s var(--lp-ease); } .landing-capability-icon svg { width: 18px; height: 18px; } [dir="rtl"] .landing-capability-icon svg { transform: scaleX(-1); } .landing-capability-featured .landing-capability-icon { background: var(--lp-orange); color: var(--lp-white); } .landing-capability-card:hover .landing-capability-icon { transform: rotate(-8deg) scale(1.06); } .landing-capability-card:not(.landing-capability-featured):hover .landing-capability-icon { background: var(--lp-orange); color: var(--lp-white); } .landing-card-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-orange); margin-bottom: 14px; padding-inline-end: 56px; } html.lang-ar .landing-card-kicker { letter-spacing: 0; } .landing-capability-card h3 { font-size: clamp(21px, 1.8vw, 26px); margin-bottom: 12px; padding-inline-end: 40px; } .landing-capability-card > p { font-size: 14.5px; margin-bottom: 26px; } .landing-chip-row { display: flex; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; } .landing-chip-row span { flex: 1; min-width: 88px; text-align: center; padding: 13px 12px; border-radius: var(--lp-r); background: var(--lp-bg); border: 1px solid var(--lp-line); font-size: 13px; font-weight: 600; transition: transform 0.4s var(--lp-ease), background-color 0.4s var(--lp-ease), color 0.4s var(--lp-ease); } .landing-chip-row span.is-accent { background: var(--lp-dark); color: var(--lp-white); border-color: transparent; } .landing-capability-card:hover .landing-chip-row span { transform: translateY(-3px); } .landing-capability-card:hover .landing-chip-row span:nth-child(2) { transition-delay: 0.05s; } .landing-capability-card:hover .landing-chip-row span:nth-child(3) { transition-delay: 0.1s; } .landing-chip-row i { flex: none; width: 18px; height: 1.5px; background: var(--lp-line-strong); border-radius: 2px; } /* Featured identity visual */ .landing-id-visual { position: relative; display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 20px; border-radius: var(--lp-r); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--lp-dark-line); } .landing-id-document { flex: 1; display: grid; gap: 7px; padding: 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); } .landing-id-document span { height: 6px; width: 55%; border-radius: 3px; background: var(--lp-orange); } .landing-id-document i { height: 6px; width: 85%; border-radius: 3px; background: rgba(255, 255, 255, 0.32); } .landing-id-document b { height: 6px; width: 68%; border-radius: 3px; background: rgba(255, 255, 255, 0.22); } .landing-id-face { width: 58px; height: 58px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1.5px solid var(--lp-orange); display: grid; place-items: center; position: relative; } .landing-id-face span { width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); margin-bottom: 2px; } .landing-id-face i { position: absolute; bottom: 12px; width: 28px; height: 13px; border-radius: 0 0 16px 16px; background: rgba(255, 255, 255, 0.28); } .landing-id-link { position: absolute; top: 50%; inset-inline-end: 78px; width: 22px; height: 1.5px; background: var(--lp-orange); opacity: 0.7; } .landing-id-link::after { content: ""; position: absolute; inset: 0; background: var(--lp-orange); animation: lp-scan 2.6s var(--lp-ease-io) infinite; } @keyframes lp-scan { 0% { transform: scaleX(0); transform-origin: left; opacity: 1; } 55% { transform: scaleX(1); transform-origin: left; opacity: 1; } 56% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; opacity: 0.4; } } @media (max-width: 900px) { .landing-capability-grid { grid-template-columns: 1fr; } .landing-problem-grid { grid-template-columns: 1fr; } } /* ── How it works — vertical timeline ─────────────────────── */ .landing-process-section { background: var(--lp-dark); color: var(--lp-white); } .landing-process-section .landing-section-heading { text-align: center; margin-inline: auto; } .landing-process-list { position: relative; max-width: 780px; margin-inline: auto; display: grid; gap: 6px; } .landing-process-rail { position: absolute; inset-block: 26px; inset-inline-start: 21px; width: 1.5px; background: var(--lp-dark-line); overflow: hidden; } .landing-process-rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--lp-orange), rgba(255, 90, 34, 0.15)); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--lp-ease); } .landing-process-list.is-in .landing-process-rail i { transform: scaleY(1); } .landing-process-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 24px; padding: 22px 0; } .landing-process-step b { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--lp-dark-ink); background: var(--lp-dark); border: 1.5px solid var(--lp-dark-line); transition: color 0.45s var(--lp-ease), border-color 0.45s var(--lp-ease), background-color 0.45s var(--lp-ease), transform 0.45s var(--lp-ease); } .landing-process-step:hover b, .landing-process-step.is-active b { color: var(--lp-white); background: var(--lp-orange); border-color: var(--lp-orange); transform: scale(1.08); } .landing-process-step h3 { font-size: clamp(19px, 1.7vw, 24px); margin-bottom: 8px; padding-top: 8px; } .landing-process-step p { font-size: 14.5px; } @media (max-width: 640px) { .landing-process-step { gap: 16px; grid-template-columns: 38px minmax(0, 1fr); } .landing-process-step b { width: 38px; height: 38px; font-size: 13px; } .landing-process-rail { inset-inline-start: 18px; } } /* ── Benefits ─────────────────────────────────────────────── */ .landing-benefits-section { background: var(--lp-bg); } .landing-benefits-copy { text-align: center; max-width: 760px; margin: 0 auto 58px; } .landing-benefits-copy h2 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 16px; } .landing-benefits-copy p { font-size: clamp(15px, 1.15vw, 17px); } .landing-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .landing-benefits-grid article { position: relative; padding: 30px 30px 32px; background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-xl); overflow: hidden; transition: transform 0.5s var(--lp-ease), box-shadow 0.5s var(--lp-ease); } .landing-benefits-grid article::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--lp-orange-tint); opacity: 0; transition: opacity 0.55s var(--lp-ease), transform 0.7s var(--lp-ease); transform: scale(0.6); } .landing-benefits-grid article:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -44px rgba(19, 19, 18, 0.5); } .landing-benefits-grid article:hover::after { opacity: 1; transform: scale(1); } .landing-benefits-grid span { position: relative; display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--lp-orange); margin-bottom: 16px; } .landing-benefits-grid h3 { position: relative; font-size: 21px; margin-bottom: 9px; } .landing-benefits-grid p { position: relative; font-size: 14.5px; } /* ── Security ─────────────────────────────────────────────── */ .landing-security-section { background: var(--lp-bg-raised); } .landing-security-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 62px; align-items: start; } .landing-security-copy h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 16px; } .landing-security-copy p { font-size: 15.5px; } .landing-security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .landing-security-grid article { padding: 26px 24px; background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); transition: transform 0.45s var(--lp-ease), border-color 0.45s var(--lp-ease); } .landing-security-grid article:hover { transform: translateY(-4px); border-color: var(--lp-orange); } .landing-security-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--lp-orange-tint); color: var(--lp-orange); display: grid; place-items: center; margin-bottom: 16px; } .landing-security-icon svg { width: 18px; height: 18px; } .landing-security-grid h3 { font-size: 17px; margin-bottom: 7px; } .landing-security-grid p { font-size: 14px; } @media (max-width: 960px) { .landing-security-layout { grid-template-columns: 1fr; gap: 38px; } .landing-benefits-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .landing-security-grid { grid-template-columns: 1fr; } } /* ── Contact ──────────────────────────────────────────────── */ .landing-contact-section { background: var(--lp-bg-raised); padding: 108px 0; } .landing-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 56px; align-items: center; } .landing-contact-copy h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 14px; } .landing-contact-copy > p { font-size: 15.5px; margin-bottom: 34px; } .landing-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .landing-field { display: block; } .landing-field-wide { grid-column: 1 / -1; } .landing-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--lp-ink-soft); margin-bottom: 7px; } .landing-field input, .landing-field textarea { width: 100%; padding: 13px 16px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--lp-ink); background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r); outline: none; transition: border-color 0.3s var(--lp-ease), box-shadow 0.3s var(--lp-ease), background-color 0.3s var(--lp-ease); } html.lang-ar .landing-field input, html.lang-ar .landing-field textarea { font-family: var(--brand-font-arabic); } .landing-field textarea { min-height: 116px; resize: vertical; } .landing-field input:focus, .landing-field textarea:focus { border-color: var(--lp-orange); box-shadow: 0 0 0 4px var(--lp-orange-tint); } .landing-field input::placeholder, .landing-field textarea::placeholder { color: var(--lp-ink-faint); } .landing-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; } .landing-form-note { font-size: 13.5px; font-weight: 500; min-height: 20px; opacity: 0; transform: translateY(-4px); transition: opacity 0.4s var(--lp-ease), transform 0.4s var(--lp-ease); } .landing-form-note.is-shown { opacity: 1; transform: none; } .landing-form-note.is-error { color: var(--lp-orange-deep); } .landing-form-note.is-success { color: #0F9D58; } .landing-form-footer .landing-button { margin-inline-start: auto; } .landing-contact-visual { position: relative; aspect-ratio: 1 / 1.06; border-radius: var(--lp-r-xl); background: var(--lp-dark); display: grid; place-items: center; overflow: hidden; } .landing-contact-visual::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 34, 0.55), transparent 68%); filter: blur(38px); animation: lp-breathe 6s var(--lp-ease-io) infinite alternate; } @keyframes lp-breathe { from { transform: scale(0.9); opacity: 0.75; } to { transform: scale(1.15); opacity: 1; } } .landing-contact-visual img { position: relative; z-index: 1; width: min(210px, 46%); } @media (max-width: 900px) { .landing-contact-layout { grid-template-columns: 1fr; gap: 40px; } .landing-contact-visual { order: -1; aspect-ratio: 16 / 9; } } @media (max-width: 520px) { .landing-form-grid { grid-template-columns: 1fr; } .landing-form-footer .landing-button { width: 100%; margin-inline-start: 0; } } /* ── Final CTA ────────────────────────────────────────────── */ .landing-final-cta { position: relative; padding: 128px 0; background: var(--lp-dark); color: var(--lp-white); overflow: hidden; text-align: center; } .landing-final-orbit { position: absolute; border: 1px solid rgba(255, 90, 34, 0.22); border-radius: 50%; inset-inline-start: 50%; top: 50%; pointer-events: none; } .landing-final-orbit-one { width: 620px; height: 620px; margin: -310px 0 0 -310px; animation: lp-spin 70s linear infinite; } .landing-final-orbit-two { width: 940px; height: 940px; margin: -470px 0 0 -470px; border-style: dashed; opacity: 0.5; animation: lp-spin 110s linear infinite reverse; } .landing-final-content { position: relative; z-index: 1; } .landing-final-content > span { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-orange); margin-bottom: 18px; } html.lang-ar .landing-final-content > span { letter-spacing: 0; } .landing-final-content h2 { font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 16px; } .landing-final-content p { font-size: clamp(15px, 1.2vw, 17.5px); max-width: 620px; margin: 0 auto 34px; } .landing-final-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* ── Footer ───────────────────────────────────────────────── */ .landing-footer { background: #080808; color: var(--lp-dark-ink); padding: 76px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .landing-footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .landing-footer-brand img { height: 30px; width: auto; margin-bottom: 18px; } .landing-footer-brand p { font-size: 14px; max-width: 40ch; color: var(--lp-dark-ink); } .landing-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; justify-items: start; } /* align-content:start stops the shorter column stretching its rows apart. */ .landing-footer-links > div { display: grid; gap: 11px; justify-items: start; align-content: start; } .landing-footer-links strong { font-size: 13px; font-weight: 700; color: var(--lp-white); margin-bottom: 3px; } .landing-footer-links button { font-size: 14px; color: var(--lp-dark-ink); transition: color 0.3s var(--lp-ease), transform 0.3s var(--lp-ease); text-align: start; } .landing-footer-links button:hover { color: var(--lp-orange); transform: translateX(3px); } [dir="rtl"] .landing-footer-links button:hover { transform: translateX(-3px); } .landing-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; font-size: 13px; } @media (max-width: 820px) { .landing-footer-top { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 900px) { .landing-section, .landing-contact-section { padding: 76px 0; } .landing-final-cta { padding: 92px 0; } .landing-section-heading { margin-bottom: 40px; } }