.sales-rail-site, .sales-rail-site * { box-sizing: border-box; } .sales-rail-site { --midnight: #280047; --indigo: #3A36D0; --violet: #8500CF; --bg: #0a0018; --white: #fff; --muted: rgba(255,255,255,.70); width: 100%; margin: 0px; min-height: 0px; overflow: hidden; background: rgb(10, 0, 24); color: rgb(255, 255, 255); font-family: Zain, Arial, sans-serif; font-size: 16px; line-height: 1.5; position: relative; isolation: isolate; } .sales-rail-site a { color: inherit; text-decoration: none; } .sales-rail-site button { font: inherit; } .sales-rail-site img { max-width: 100%; display: block; } .sales-rail-site .sr-container { width: min(100% - 32px, 1280px); margin-inline: auto; } .sales-rail-site .sr-glass { background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(140%); box-shadow: rgba(0, 0, 0, 0.7) 0px 10px 40px -20px, rgba(255, 255, 255, 0.06) 0px 1px inset; } .sales-rail-site .sr-glass-strong { background: linear-gradient(rgba(20, 10, 40, 0.72), rgba(20, 10, 40, 0.42)); border: 1px solid rgba(255, 255, 255, 0.11); backdrop-filter: blur(24px) saturate(160%); } .sales-rail-site .sr-gradient-button { border: 0px; background: linear-gradient(135deg, rgb(40, 0, 71) 0%, rgb(58, 54, 208) 55%, rgb(133, 0, 207) 100%); color: rgb(255, 255, 255); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; font-weight: 800; box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(133, 0, 207, 0.62) 0px 0px 40px -8px, rgba(58, 54, 208, 0.52) 0px 0px 80px -20px; transition: 0.25s; cursor: pointer; } .sales-rail-site .sr-gradient-button:hover { filter: brightness(1.13); transform: translateY(-2px); } .sales-rail-site .sr-secondary-button { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; font-weight: 700; transition: 0.25s; } .sales-rail-site .sr-secondary-button:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); } .sales-rail-site svg, .sales-rail-site i[data-lucide] { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 2; } .sales-rail-site i[data-lucide] { display: inline-grid; place-items: center; font-style: normal; line-height: 1; } .sales-rail-site .sr-brand-text, .sales-rail-site .sr-price, .sales-rail-site .sr-stat-k { background: linear-gradient(120deg, rgb(181, 123, 255) 0%, rgb(133, 0, 207) 50%, rgb(58, 54, 208) 100%) text; color: transparent; } .sales-rail-site .sr-section { position: relative; padding: 72px 0px; scroll-margin-top: 88px; } .sales-rail-site .sr-mesh::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(1200px 600px at 15% 0%, rgba(133, 0, 207, 0.3), transparent 60%), radial-gradient(900px 500px at 85% 15%, rgba(58, 54, 208, 0.28), transparent 60%), radial-gradient(700px 500px at 50% 100%, rgba(40, 0, 71, 0.5), transparent 60%); } .sales-rail-site .sr-section-header { max-width: 820px; } .sales-rail-site[dir="rtl"] .sr-section-header { margin-left: auto; text-align: right; } .sales-rail-site[dir="ltr"] .sr-section-header { margin-right: auto; text-align: left; } .sales-rail-site .sr-section-header.sr-center, .sales-rail-site .sr-center { text-align: center; margin-inline: auto; } .sales-rail-site .sr-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(181, 123, 255, 0.92); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; } .sales-rail-site .sr-eyebrow span { width: 32px; height: 1px; background: linear-gradient(90deg, rgb(133, 0, 207), transparent); } .sales-rail-site .sr-section-title { margin: 12px 0px 0px; color: rgb(255, 255, 255); font-size: clamp(34px, 4vw, 56px); line-height: 1.12; font-weight: 900; } .sales-rail-site .sr-section-sub { margin: 16px 0px 0px; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.75; } .sales-rail-site .sr-reveal { opacity: 0; transform: translateY(22px); transition: opacity .68s ease var(--delay,0s),transform .68s ease var(--delay,0s); } .sales-rail-site .sr-reveal.is-visible { opacity: 1; transform: none; } .sales-rail-site .sr-nav { position: fixed; top: 0px; inset-inline: 0px; z-index: 1000; padding: 16px 0px; transition: 0.35s; pointer-events: none; } .sales-rail-site .sr-nav.is-scrolled { padding: 8px 0px; } .sales-rail-site .sr-nav-shell { min-height: 64px; border-radius: 18px; padding: 10px 18px; display: flex; align-items: center; gap: 12px; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 70px -35px; } .sales-rail-site .sr-logo-link { display: flex; align-items: center; min-width: 120px; } .sales-rail-site .sr-logo-img { height: 36px; width: auto; } .sales-rail-site .sr-logo-fallback { display: none; color: rgb(255, 255, 255); font-size: 18px; letter-spacing: 0.16em; font-weight: 900; white-space: nowrap; } .sales-rail-site .sr-desktop-nav { display: flex; align-items: center; justify-content: center; gap: 2px; margin-inline: auto; } .sales-rail-site .sr-desktop-nav a { color: rgba(255, 255, 255, 0.75); padding: 8px 12px; border-radius: 9px; font-size: 15px; transition: 0.2s; } .sales-rail-site .sr-desktop-nav a:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); } .sales-rail-site .sr-nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; } .sales-rail-site .sr-lang-switch { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 3px; } .sales-rail-site .sr-lang-switch button { border: 0px; background: transparent; color: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 4px 12px; cursor: pointer; } .sales-rail-site .sr-lang-switch button.is-active { background: rgb(255, 255, 255); color: rgb(40, 0, 71); font-weight: 900; } .sales-rail-site .sr-nav-cta { padding: 9px 16px; font-size: 14px; } .sales-rail-site .sr-icon-button { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: rgb(255, 255, 255); border-radius: 11px; display: none; place-items: center; cursor: pointer; } .sales-rail-site .sr-mobile-menu { pointer-events: auto; display: none; margin-top: 8px; border-radius: 18px; padding: 12px; } .sales-rail-site .sr-mobile-menu.is-open { display: flex; flex-direction: column; } .sales-rail-site .sr-mobile-menu > a:not(.sr-mobile-cta) { padding: 12px; border-radius: 10px; color: rgba(255, 255, 255, 0.86); } .sales-rail-site .sr-mobile-menu > a:not(.sr-mobile-cta):hover { background: rgba(255, 255, 255, 0.06); } .sales-rail-site .sr-mobile-cta { margin-top: 6px; padding: 12px; } .sales-rail-site .sr-hero { min-height: 760px; position: relative; overflow: hidden; padding: 112px 0px 62px; display: flex; align-items: center; } .sales-rail-site .sr-hero-media, .sales-rail-site .sr-hero-media > img, .sales-rail-site .sr-hero-overlay, .sales-rail-site .sr-hero-bottom-fade { position: absolute; inset: 0px; } .sales-rail-site .sr-hero-media > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; } .sales-rail-site[dir="rtl"] .sr-hero-media > img { transform: none; object-position: right center; } .sales-rail-site .sr-hero-overlay { background: linear-gradient(90deg, rgba(10, 0, 24, 0.97) 0%, rgba(10, 0, 24, 0.87) 23%, rgba(10, 0, 24, 0.38) 60%, rgba(10, 0, 24, 0.14) 100%); } .sales-rail-site[dir="rtl"] .sr-hero-overlay { background: linear-gradient(90deg, rgba(10, 0, 24, 0.97) 0%, rgba(10, 0, 24, 0.87) 23%, rgba(10, 0, 24, 0.38) 60%, rgba(10, 0, 24, 0.14) 100%); } .sales-rail-site .sr-hero-bottom-fade { background: linear-gradient(transparent 62%, rgb(10, 0, 24) 100%); } .sales-rail-site .sr-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr); gap: 60px; align-items: center; min-height: 586px; } .sales-rail-site[dir="rtl"] .sr-hero-copy { text-align: right; order: 0; } .sales-rail-site[dir="ltr"] .sr-hero-copy { text-align: left; } .sales-rail-site .sr-badge { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 7px 14px; color: rgba(255, 255, 255, 0.9); font-size: 14px; } .sales-rail-site .sr-live-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(133, 0, 207); box-shadow: rgba(133, 0, 207, 0.12) 0px 0px 0px 7px; animation: 2.2s ease 0s infinite normal none running srPulse; } .sales-rail-site .sr-hero h1 { margin: 20px 0px 0px; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 900; } .sales-rail-site .sr-hero-sub { max-width: 650px; margin: 20px 0px 0px; color: var(--muted); font-size: clamp(16px, 1.45vw, 20px); line-height: 1.75; } .sales-rail-site[dir="rtl"] .sr-hero-sub { margin-left: auto; } .sales-rail-site .sr-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .sales-rail-site[dir="rtl"] .sr-hero-actions, .sales-rail-site[dir="rtl"] .sr-chips { justify-content: flex-end; } .sales-rail-site[dir="rtl"] .sr-arrow { transform: rotate(180deg); } .sales-rail-site .sr-chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; } .sales-rail-site .sr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 14px; color: rgba(255, 255, 255, 0.87); background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.024)); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); } .sales-rail-site .sr-chip svg { color: rgb(181, 123, 255); } .sales-rail-site .sr-stats { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 650px; } .sales-rail-site .sr-stat { border-radius: 17px; padding: 14px 16px; } .sales-rail-site .sr-stat-k { font-size: 34px; line-height: 1; font-weight: 900; } .sales-rail-site .sr-stat-v { margin-top: 8px; color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.25; } .sales-rail-site .sr-hero-visual { position: relative; height: 520px; } .sales-rail-site[dir="rtl"] .sr-hero-visual { order: 0; } .sales-rail-site .sr-ambient { position: absolute; inset: 30px; border-radius: 40px; background: linear-gradient(135deg, rgba(133, 0, 207, 0.25), transparent, rgba(58, 54, 208, 0.2)); filter: blur(28px); } .sales-rail-site .sr-floating-badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 700; color: rgb(255, 255, 255); background: rgba(133, 0, 207, 0.2); border: 1px solid rgba(133, 0, 207, 0.4); backdrop-filter: blur(18px); animation: 6s ease-in-out 0s infinite normal none running srFloat; z-index: 2; } .sales-rail-site .sr-floating-badge:nth-of-type(2n) { background: rgba(58, 54, 208, 0.23); border-color: rgba(58, 54, 208, 0.42); } .sales-rail-site .sr-floating-badge.sr-highlight { background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 55%, rgb(133, 0, 207)); border-color: rgba(255, 255, 255, 0.2); box-shadow: rgba(133, 0, 207, 0.8) 0px 0px 45px -8px; } .sales-rail-site .sr-float-a { top: 24px; left: 16px; } .sr-float-b { top: 96px; right: 32px; animation-delay: 0.6s !important; } .sr-float-c { bottom: 112px; left: 8px; animation-delay: 1.2s !important; } .sr-float-d { bottom: 40px; right: 24px; animation-delay: 1.8s !important; } .sr-float-e { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.3s !important; } .sales-rail-site .sr-hero-rail { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0.75; } .sales-rail-site .sr-hero-rail path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: 2.4s ease-in-out 0.3s 1 normal forwards running srDraw; } .sales-rail-site .sr-particles { position: absolute; inset: 0px; pointer-events: none; z-index: 1; } .sales-rail-site .sr-particles span { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: rgba(181, 123, 255, 0.7); animation: srParticle var(--d) ease-in var(--delay) infinite; } .sales-rail-site .sr-equation { margin-top: 54px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; } .sales-rail-site .sr-eq-card { border-radius: 28px; padding: 26px; } .sales-rail-site .sr-card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(133, 0, 207, 0.22); color: rgb(215, 187, 255); font-size: 24px; transition: 0.3s; } .sales-rail-site .sr-card-icon.sr-blue { background: rgba(58, 54, 208, 0.24); color: rgb(184, 177, 255); } .sales-rail-site .sr-eq-card h3, .sales-rail-site .sr-need-card h3 { margin: 16px 0px 0px; font-size: 22px; font-weight: 800; } .sales-rail-site .sr-eq-card p, .sales-rail-site .sr-need-card p { margin: 8px 0px 0px; color: var(--muted); font-size: 15px; line-height: 1.7; } .sales-rail-site .sr-result-card { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 55%, rgb(133, 0, 207)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: rgba(133, 0, 207, 0.65) 0px 0px 55px -12px; } .sales-rail-site .sr-result-card ul { list-style: none; padding: 0px; margin: 12px 0px 0px; display: grid; gap: 8px; } .sales-rail-site .sr-result-card li { display: flex; gap: 9px; font-size: 15px; } .sales-rail-site .sr-result-card li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: rgb(255, 255, 255); flex: 0 0 auto; } .sales-rail-site .sr-eq-symbol { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; align-self: center; font-size: 28px; animation: 6s ease-in-out 0s infinite normal none running srFloat; } .sales-rail-site .sr-meta-pills { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .sales-rail-site .sr-meta { border-radius: 999px; padding: 9px 15px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.75); } .sales-rail-site .sr-meta svg { color: rgb(181, 123, 255); } .sr-meta b { color: rgb(255, 255, 255); } .sales-rail-site .sr-needs-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sales-rail-site .sr-need-card { border-radius: 22px; padding: 24px; transition: 0.3s; overflow: hidden; position: relative; } .sales-rail-site .sr-need-card:hover { transform: translateY(-6px); border-color: rgba(181, 123, 255, 0.28); box-shadow: rgba(133, 0, 207, 0.8) 0px 30px 65px -35px; } .sales-rail-site .sr-need-card:hover .sr-card-icon { transform: scale(1.1); } .sales-rail-site .sr-services-wrap { margin-top: 52px; position: relative; display: grid; gap: 16px; } .sales-rail-site .sr-rail-line { position: absolute; left: 32px; right: 32px; top: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(133, 0, 207, 0.7), rgba(58, 54, 208, 0.7), transparent); } .sales-rail-site .sr-accordion { border-radius: 26px; overflow: hidden; transition: 0.3s; position: relative; } .sales-rail-site .sr-accordion.is-open { box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(133, 0, 207, 0.55) 0px 0px 45px -10px; } .sales-rail-site .sr-accordion-trigger { width: 100%; border: 0px; background: transparent; color: rgb(255, 255, 255); padding: 21px 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px; cursor: pointer; text-align: inherit; } .sales-rail-site .sr-accordion-main { display: flex; align-items: center; gap: 20px; min-width: 0px; } .sales-rail-site .sr-service-icon { width: 58px; height: 58px; border-radius: 17px; background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 55%, rgb(133, 0, 207)); display: grid; place-items: center; font-size: 25px; box-shadow: rgba(133, 0, 207, 0.8) 0px 0px 35px -9px; flex: 0 0 auto; } .sales-rail-site .sr-foundation-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(133, 0, 207, 0.2); color: rgb(215, 187, 255); display: grid; place-items: center; font-size: 21px; flex: 0 0 auto; } .sales-rail-site .sr-accordion-title { min-width: 0px; } .sales-rail-site .sr-accordion-title small { display: block; color: rgba(181, 123, 255, 0.8); font-family: monospace; font-size: 12px; } .sales-rail-site .sr-accordion-title h3 { margin: 2px 0px 0px; font-size: clamp(18px, 2.1vw, 28px); line-height: 1.25; font-weight: 800; } .sales-rail-site .sr-accordion-title p { margin: 4px 0px 0px; color: rgba(255, 255, 255, 0.64); font-size: 14px; } .sales-rail-site .sr-chevron { font-size: 26px; transition: 0.3s; flex: 0 0 auto; } .sales-rail-site .sr-accordion.is-open .sr-chevron { transform: rotate(180deg); } .sales-rail-site .sr-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s; } .sales-rail-site .sr-accordion.is-open .sr-accordion-panel { grid-template-rows: 1fr; } .sales-rail-site .sr-accordion-inner { overflow: hidden; padding: 0px 26px; } .sales-rail-site .sr-accordion.is-open .sr-accordion-inner { padding-bottom: 24px; } .sales-rail-site .sr-accordion-desc { margin: 0px; color: rgba(255, 255, 255, 0.75); font-size: 16px; line-height: 1.75; } .sales-rail-site .sr-accordion-inner ul { list-style: none; padding: 0px; margin: 18px 0px 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } .sales-rail-site .sr-accordion-inner li, .sales-rail-site .sr-feature-list li { display: flex; align-items: flex-start; gap: 9px; color: rgba(255, 255, 255, 0.86); font-size: 15px; } .sales-rail-site .sr-accordion-inner li svg, .sales-rail-site .sr-feature-list li svg { margin-top: 4px; width: 19px; height: 19px; padding: 3px; border-radius: 50%; background: rgba(133, 0, 207, 0.25); color: rgb(215, 187, 255); flex: 0 0 auto; } .sales-rail-site .sr-process { margin-top: 54px; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .sales-rail-site .sr-process-rail { position: absolute; left: 35px; right: 35px; top: 25px; height: 1px; background: linear-gradient(90deg, transparent, rgba(133, 0, 207, 0.7), rgba(58, 54, 208, 0.7), transparent); } .sales-rail-site .sr-process-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; } .sales-rail-site .sr-process-number { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 55%, rgb(133, 0, 207)); font-weight: 800; box-shadow: rgba(133, 0, 207, 0.75) 0px 0px 38px -8px; z-index: 1; } .sales-rail-site .sr-process-card { width: 100%; border-radius: 18px; padding: 17px 13px; text-align: center; min-height: 136px; } .sales-rail-site .sr-process-card h3 { margin: 0px; font-size: 18px; font-weight: 800; } .sr-process-card p { margin: 7px 0px 0px; color: rgba(255, 255, 255, 0.64); font-size: 14px; line-height: 1.55; } .sales-rail-site .sr-packages-grid { max-width: 1040px; margin: 54px auto 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .sales-rail-site .sr-package { position: relative; border-radius: 28px; padding: 28px; overflow: hidden; } .sales-rail-site .sr-package.sr-recommended { box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(133, 0, 207, 0.62) 0px 0px 52px -10px; } .sales-rail-site .sr-package.sr-recommended::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg, transparent, rgb(181, 123, 255), transparent); } .sales-rail-site .sr-package-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sales-rail-site .sr-ai-pill, .sales-rail-site .sr-rec-pill, .sales-rail-site .sr-save-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 800; } .sales-rail-site .sr-ai-pill { background: rgba(133, 0, 207, 0.2); color: rgb(215, 187, 255); } .sr-rec-pill { background: linear-gradient(135deg, rgb(58, 54, 208), rgb(133, 0, 207)); color: rgb(255, 255, 255); } .sr-save-pill { margin-inline-start: auto; background: rgba(16, 185, 129, 0.15); color: rgb(134, 239, 172); } .sales-rail-site .sr-package-name { margin: 22px 0px 0px; font-size: 34px; line-height: 1.1; font-weight: 900; } .sr-package-en { margin-top: 4px; color: rgba(255, 255, 255, 0.58); font-size: 14px; } .sales-rail-site .sr-price-row { margin-top: 25px; display: flex; align-items: flex-end; gap: 12px; } .sr-price { font-size: 64px; line-height: 0.9; font-weight: 900; } .sr-monthly { color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 6px; } .sr-old-price { margin-top: 6px; color: rgba(255, 255, 255, 0.38); text-decoration: line-through; } .sales-rail-site .sr-feature-list { list-style: none; padding: 0px; margin: 25px 0px 0px; display: grid; gap: 13px; } .sales-rail-site .sr-feature-list li svg { background: linear-gradient(135deg, rgb(58, 54, 208), rgb(133, 0, 207)); color: rgb(255, 255, 255); } .sales-rail-site .sr-package-cta { width: 100%; margin-top: 30px; min-height: 50px; } .sales-rail-site .sr-foundations { margin: 48px auto 0px; max-width: 900px; display: grid; gap: 12px; } .sales-rail-site .sr-measure-grid { margin-top: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .sales-rail-site .sr-measure-visual { position: relative; border-radius: 28px; overflow: hidden; min-height: 390px; } .sales-rail-site .sr-measure-visual > img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; } .sr-measure-fade { position: absolute; inset: 0px; background: linear-gradient(to top, rgb(10, 0, 24), transparent 65%); } .sales-rail-site .sr-kpis { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sales-rail-site .sr-kpis > div { border-radius: 13px; padding: 9px; text-align: center; } .sr-kpis small { display: block; color: rgba(255, 255, 255, 0.6); font-size: 10px; letter-spacing: 0.12em; } .sr-kpis b { display: block; margin-top: 2px; } .sales-rail-site .sr-measure-list { list-style: none; padding: 0px; margin: 0px; display: grid; gap: 12px; } .sr-measure-item { border-radius: 18px; padding: 15px; display: flex; align-items: flex-start; gap: 13px; color: rgba(255, 255, 255, 0.9); } .sales-rail-site .sr-measure-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(58, 54, 208, 0.24); color: rgb(184, 177, 255); flex: 0 0 auto; font-size: 21px; } .sales-rail-site .sr-vision { position: relative; overflow: hidden; padding: 80px 0px; scroll-margin-top: 88px; } .sr-vision-bg, .sr-vision-bg > img, .sr-vision-bg > div { position: absolute; inset: 0px; } .sr-vision-bg > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; } .sr-vision-bg > div { background: linear-gradient(rgba(10, 0, 24, 0.82), rgba(10, 0, 24, 0.72), rgb(10, 0, 24)); } .sales-rail-site .sr-vision .sr-container { position: relative; z-index: 1; max-width: 1020px; } .sr-vision-eyebrow { letter-spacing: 0.25em; } .sr-vision-logo-card { width: max-content; min-width: 220px; min-height: 128px; margin: 24px auto 0px; padding: 18px 26px; border-radius: 18px; background: rgba(255, 255, 255, 0.95); display: grid; place-items: center; box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 80px -20px; } .sr-vision-logo-card img { max-height: 96px; width: auto; } .sr-image-fallback { display: none; color: rgb(40, 0, 71); font-weight: 900; font-size: 26px; letter-spacing: 0.12em; } .sales-rail-site .sr-vision-title { margin: 28px 0px 0px; font-size: clamp(38px, 5vw, 66px); line-height: 1.1; font-weight: 900; } .sr-vision-sub { max-width: 850px; margin: 20px auto 0px; color: rgba(255, 255, 255, 0.75); font-size: 19px; line-height: 1.75; } .sr-vision-bars { margin-top: 36px; display: flex; justify-content: center; gap: 8px; } .sr-vision-bars span { width: 4px; height: 32px; border-radius: 99px; background: linear-gradient(rgb(133, 0, 207), rgb(58, 54, 208)); opacity: calc(.3 + var(--i)*.07); animation: srPulse 2.4s ease-in-out calc(var(--i)*.12s) infinite; } .sales-rail-site .sr-contact { padding-top: 58px; } .sr-cta-card { position: relative; max-width: 1180px; margin: auto; overflow: hidden; border-radius: 34px; padding: 52px 30px; text-align: center; box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(133, 0, 207, 0.55) 0px 0px 55px -10px; } .sr-cta-card > svg { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0.55; } .sr-cta-card > svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: 2.1s ease 0s 1 normal forwards running srDraw; } .sr-cta-content { position: relative; z-index: 1; } .sr-cta-content h2 { max-width: 850px; margin: 0px auto; font-size: clamp(34px, 4.2vw, 55px); line-height: 1.15; font-weight: 900; } .sr-cta-content p { max-width: 760px; margin: 16px auto 0px; color: rgba(255, 255, 255, 0.75); font-size: 18px; line-height: 1.7; } .sr-cta-actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sales-rail-site .sr-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); } .sr-footer-grid { padding-top: 54px; padding-bottom: 44px; display: grid; grid-template-columns: 1.15fr 0.75fr 1.1fr; gap: 44px; } .sr-footer-logo { min-height: 40px; display: flex; align-items: center; } .sr-footer-logo img { height: 40px; width: auto; } .sr-footer-tag { margin-top: 12px; color: rgb(181, 123, 255); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; } .sr-footer-desc { max-width: 380px; margin: 14px 0px 0px; color: rgba(255, 255, 255, 0.68); line-height: 1.7; } .sr-footer h3 { margin: 0px 0px 14px; font-size: 16px; } .sr-footer-links { list-style: none; padding: 0px; margin: 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sr-footer-links a { color: rgba(255, 255, 255, 0.7); } .sr-footer-links a:hover { color: rgb(255, 255, 255); } .sr-payment { border-radius: 18px; padding: 16px; color: rgba(255, 255, 255, 0.82); display: grid; gap: 8px; } .sr-iban { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); padding: 9px 12px; font-family: monospace; font-size: 13px; } .sr-iban span { overflow: hidden; text-overflow: ellipsis; } .sr-iban button { border: 0px; background: transparent; color: rgb(181, 123, 255); cursor: pointer; padding: 4px; } .sr-copy-note { display: none; color: rgb(134, 239, 172); font-size: 12px; } .sr-copy-note.is-visible { display: block; } .sr-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; padding: 18px 16px; color: rgba(255, 255, 255, 0.5); font-size: 13px; } @keyframes srFloat { 0%, 100% { translate: 0px; } 50% { translate: 0px -14px; } } @keyframes srPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes srPulseRing { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.45); opacity: 0; } } @keyframes srDraw { 100% { stroke-dashoffset: 0; } } @keyframes srParticle { 0% { transform: translate(0px, 0px); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sales-rail-site *, .sales-rail-site ::before, .sales-rail-site ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .sr-reveal { opacity: 1 !important; transform: none !important; } } @media (max-width: 1050px) { .sales-rail-site .sr-desktop-nav { display: none; } .sales-rail-site .sr-menu-button { display: grid; } .sales-rail-site .sr-hero { min-height: auto; } .sales-rail-site .sr-hero-grid { grid-template-columns: 1fr; min-height: auto; } .sr-hero-visual { display: none; } .sr-process { grid-template-columns: repeat(3, 1fr); } .sr-process-rail { display: none; } .sr-measure-grid { grid-template-columns: 1fr; } .sr-measure-visual { order: 2; } .sr-measure-list { order: 1; } } @media (max-width: 760px) { .sales-rail-site .sr-container { width: min(100% - 24px, 1280px); } .sales-rail-site .sr-section { padding: 56px 0px; } .sales-rail-site .sr-nav { padding: 8px 0px; } .sr-nav-shell { min-height: 58px !important; padding: 8px 12px !important; } .sr-logo-img { height: 31px !important; } .sr-desktop-lang { display: none !important; } .sr-mobile-lang { display: grid !important; } .sr-nav-cta { display: none !important; } .sr-hero { min-height: auto; padding: 100px 0px 58px; } .sr-hero-grid { display: block; } .sr-hero-copy { text-align: center !important; } .sr-badge { font-size: 12px !important; } .sr-hero h1 { font-size: 42px !important; } .sr-hero-sub { font-size: 16px !important; margin-inline: auto !important; } .sr-hero-actions, .sr-chips { justify-content: center !important; } .sr-stats { gap: 7px; margin-top: 30px; } .sr-stat { padding: 12px 8px !important; text-align: center !important; } .sr-stat-k { font-size: 27px !important; } .sr-stat-v { font-size: 11px !important; } .sr-equation { grid-template-columns: 1fr; } .sr-eq-symbol { display: none; } .sr-needs-grid { grid-template-columns: 1fr; } .sr-rail-line { display: none; } .sr-accordion-trigger { padding: 18px 16px !important; } .sr-accordion-main { gap: 12px !important; } .sr-service-icon { width: 50px !important; height: 50px !important; } .sr-accordion-title h3 { font-size: 18px !important; } .sr-accordion-title p { font-size: 12px !important; } .sr-accordion-inner { padding-inline: 16px !important; } .sr-accordion-inner ul { grid-template-columns: 1fr; } .sr-process { display: grid; grid-template-columns: 1fr; gap: 14px; } .sr-process::before { content: ""; position: absolute; top: 15px; bottom: 15px; inset-inline-start: 24px; width: 1px; background: linear-gradient(transparent, rgba(133, 0, 207, 0.65), transparent); } .sr-process-item { display: grid; grid-template-columns: 52px 1fr; align-items: start; text-align: start; } .sr-process-card { min-height: 0px; text-align: start !important; } .sr-packages-grid { grid-template-columns: 1fr; } .sr-package { padding: 23px !important; } .sr-price { font-size: 54px !important; } .sr-measure-visual { min-height: 300px; } .sr-vision { padding: 62px 0px; } .sr-vision-logo-card { min-width: 190px; min-height: 105px; } .sr-vision-title { font-size: 38px !important; } .sr-vision-sub { font-size: 16px !important; } .sr-cta-card { padding: 38px 20px !important; } .sr-cta-content p { font-size: 16px !important; } .sr-cta-actions > a { width: 100%; } .sr-footer-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 400px) { .sales-rail-site .sr-hero h1 { font-size: 36px !important; } .sr-gradient-button, .sr-secondary-button { padding-inline: 18px !important; } .sr-package-top { align-items: flex-start; } .sr-save-pill { margin-inline-start: 0px !important; } .sr-kpis { left: 8px !important; right: 8px !important; bottom: 8px !important; } .sr-kpis b { font-size: 13px; } .sr-footer-links { grid-template-columns: 1fr 1fr; } } .sales-rail-site.sr-layout-v8 { direction: inherit; text-align: start; } .sales-rail-site.sr-layout-v8 .sr-language-page-link { min-width: 42px; height: 34px; padding: 0px 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); font-size: 13px; line-height: 1; font-weight: 800; transition: 0.22s; } .sales-rail-site.sr-layout-v8 .sr-language-page-link:hover { background: rgb(255, 255, 255); color: rgb(40, 0, 71); transform: translateY(-1px); } .sales-rail-site.sr-layout-v8 .sr-mobile-lang { display: none; } .sales-rail-site.sr-layout-v8 .sr-section-header { width: min(100%, 820px); } .sales-rail-site.sr-layout-v8 .sr-need-card, .sales-rail-site.sr-layout-v8 .sr-eq-card, .sales-rail-site.sr-layout-v8 .sr-package, .sales-rail-site.sr-layout-v8 .sr-process-card, .sales-rail-site.sr-layout-v8 .sr-accordion-title, .sales-rail-site.sr-layout-v8 .sr-accordion-inner, .sales-rail-site.sr-layout-v8 .sr-measure-item, .sales-rail-site.sr-layout-v8 .sr-footer-grid { unicode-bidi: plaintext; } @media (min-width: 1051px) { .sales-rail-site.sr-layout-v8 .sr-hero-grid { min-height: 586px; } .sales-rail-site.sr-layout-v8 .sr-hero-copy, .sales-rail-site.sr-layout-v8 .sr-hero-visual { grid-row: 1; min-width: 0px; } .sales-rail-site.sr-layout-v8 .sr-measure-grid { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); } } @media (max-width: 1050px) { .sales-rail-site.sr-layout-v8 .sr-hero-grid { grid-template-columns: 1fr; } .sales-rail-site.sr-layout-v8 .sr-hero-visual { display: none; } .sales-rail-site.sr-layout-v8 .sr-process { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .sales-rail-site.sr-layout-v8 .sr-process-rail { display: none; } .sales-rail-site.sr-layout-v8 .sr-measure-grid { grid-template-columns: 1fr; } .sales-rail-site.sr-layout-v8 .sr-measure-list { order: 1; grid-area: auto !important; } .sales-rail-site.sr-layout-v8 .sr-measure-visual { order: 2; grid-area: auto !important; } } @media (max-width: 760px) { .sales-rail-site.sr-layout-v8 .sr-mobile-lang { display: inline-flex !important; } .sales-rail-site.sr-layout-v8 .sr-section-header { width: 100%; } .sales-rail-site.sr-layout-v8 .sr-section-title { font-size: clamp(34px, 10vw, 44px); } .sales-rail-site.sr-layout-v8 .sr-section-sub { font-size: 16px; } .sales-rail-site.sr-layout-v8 .sr-needs-grid, .sales-rail-site.sr-layout-v8 .sr-equation, .sales-rail-site.sr-layout-v8 .sr-packages-grid, .sales-rail-site.sr-layout-v8 .sr-measure-grid, .sales-rail-site.sr-layout-v8 .sr-footer-grid { grid-template-columns: 1fr; } .sales-rail-site.sr-layout-v8 .sr-process { grid-template-columns: 1fr; } .sales-rail-site.sr-layout-v8 .sr-eq-symbol { display: none; } .sales-rail-site.sr-layout-v8 .sr-accordion-inner ul { grid-template-columns: 1fr; } } .sales-rail-site.sr-layout-v8.sr-ar { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-nav-shell, .sales-rail-site.sr-layout-v8.sr-ar .sr-mobile-menu { direction: rtl; } .sales-rail-site.sr-layout-v8.sr-ar .sr-section-header { margin-left: auto !important; margin-right: 0px !important; text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-eyebrow { direction: rtl; } .sales-rail-site.sr-layout-v8.sr-ar .sr-section-sub, .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-sub { text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-card-icon { margin-left: auto; margin-right: 0px; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-media > img { transform: scaleX(-1) !important; transform-origin: center center !important; object-position: center center !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-overlay { background: linear-gradient(to left, rgba(10, 0, 24, 0.98) 0%, rgba(10, 0, 24, 0.9) 24%, rgba(10, 0, 24, 0.48) 54%, rgba(10, 0, 24, 0.12) 100%) !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-copy { direction: rtl; text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-actions, .sales-rail-site.sr-layout-v8.sr-ar .sr-chips { direction: rtl; justify-content: flex-start !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-stats { direction: rtl; } .sales-rail-site.sr-layout-v8.sr-ar .sr-stat { text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-visual { direction: ltr; } .sales-rail-site.sr-layout-v8.sr-ar .sr-arrow { transform: rotate(180deg); } .sales-rail-site.sr-layout-v8.sr-ar .sr-equation, .sales-rail-site.sr-layout-v8.sr-ar .sr-needs-grid, .sales-rail-site.sr-layout-v8.sr-ar .sr-services-wrap, .sales-rail-site.sr-layout-v8.sr-ar .sr-process, .sales-rail-site.sr-layout-v8.sr-ar .sr-packages-grid, .sales-rail-site.sr-layout-v8.sr-ar .sr-foundations { direction: rtl; } .sales-rail-site.sr-layout-v8.sr-ar .sr-eq-card, .sales-rail-site.sr-layout-v8.sr-ar .sr-need-card, .sales-rail-site.sr-layout-v8.sr-ar .sr-package, .sales-rail-site.sr-layout-v8.sr-ar .sr-process-card { direction: rtl; text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-result-card li, .sales-rail-site.sr-layout-v8.sr-ar .sr-feature-list li, .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-inner li, .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-item { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-package-top, .sales-rail-site.sr-layout-v8.sr-ar .sr-price-row { direction: rtl; justify-content: flex-start; } .sales-rail-site.sr-layout-v8.sr-ar .sr-save-pill { margin-right: auto; margin-left: 0px; } .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-trigger { direction: rtl; text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-main { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-title, .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-inner { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-accordion-inner ul { direction: rtl; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-grid { direction: ltr; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-list { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-visual { direction: ltr; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-icon { order: 0; } .sales-rail-site.sr-layout-v8.sr-ar .sr-footer-grid { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-footer-logo { justify-content: flex-start; } .sales-rail-site.sr-layout-v8.sr-ar .sr-footer-links { direction: rtl; text-align: right; } .sales-rail-site.sr-layout-v8.sr-ar .sr-iban { direction: ltr; } @media (min-width: 1051px) { .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-grid { direction: ltr !important; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.08fr) !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-visual { grid-column: 1 !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-copy { grid-column: 2 !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-visual { grid-area: 1 / 1 !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-measure-list { grid-area: 1 / 2 !important; } } @media (max-width: 760px) { .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-copy { text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-sub { margin-left: auto !important; margin-right: 0px !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-hero-actions, .sales-rail-site.sr-layout-v8.sr-ar .sr-chips { justify-content: flex-start !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-stat { text-align: center !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-process::before { right: 24px !important; left: auto !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-process-item { direction: rtl; grid-template-columns: 52px minmax(0px, 1fr) !important; text-align: right !important; } .sales-rail-site.sr-layout-v8.sr-ar .sr-process-card { text-align: right !important; } } html, body { margin: 0px !important; padding: 0px !important; background: transparent !important; } .sales-rail-site.sr-layout-v8 { background: transparent !important; } .sales-rail-site.sr-layout-v8 .sr-hero { background: transparent !important; } .sales-rail-site.sr-layout-v8 .sr-hero-media, .sales-rail-site.sr-layout-v8 .sr-hero-overlay, .sales-rail-site.sr-layout-v8 .sr-hero-bottom-fade { display: none !important; background: none !important; } .srp, .srp * { box-sizing: border-box; } .srp { --midnight: #280047; --indigo: #3A36D0; --violet: #8500CF; --violet-soft: #B57BFF; --bg: #090016; --bg-2: #0d031b; --white: #fff; --muted: rgba(255,255,255,.70); --border: rgba(255,255,255,.11); width: 100%; margin: 0px; overflow: hidden; isolation: isolate; position: relative; direction: rtl; text-align: right; background: radial-gradient(900px 540px at 90% -5%, rgba(133, 0, 207, 0.22), transparent 62%), radial-gradient(760px 500px at 4% 20%, rgba(58, 54, 208, 0.17), transparent 60%), rgb(9, 0, 22); color: rgb(255, 255, 255); font-family: Zain, Arial, sans-serif; font-size: 16px; line-height: 1.55; } .srp a { color: inherit; text-decoration: none; } .srp button { font: inherit; } .srp img { display: block; max-width: 100%; } .srp .srp-container { width: min(100% - 32px, 1280px); margin-inline: auto; } .srp .srp-section { position: relative; padding: 88px 0px; } .srp .srp-glass { background: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(145%); box-shadow: rgba(0, 0, 0, 0.95) 0px 22px 65px -40px, rgba(255, 255, 255, 0.055) 0px 1px inset; } .srp .srp-brand-text { background: linear-gradient(120deg, rgb(198, 160, 255) 0%, rgb(143, 22, 220) 48%, rgb(77, 89, 255) 100%) text; color: transparent; } .srp .srp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--delay,0s), transform .7s ease var(--delay,0s); } .srp .srp-reveal.is-visible { opacity: 1; transform: none; } .srp .srp-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgb(199, 165, 255); font-size: 14px; font-weight: 800; letter-spacing: 0.12em; } .srp .srp-eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgb(133, 0, 207)); } .srp .srp-section-head { max-width: 840px; margin-right: 0px; margin-left: auto; } .srp .srp-section-head.center { margin-inline: auto; text-align: center; } .srp .srp-section-title { margin: 12px 0px 0px; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; } .srp .srp-section-sub { margin: 16px 0px 0px; color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.75; } .srp .srp-hero { min-height: 720px; padding: 92px 0px 74px; display: flex; align-items: center; position: relative; overflow: hidden; } .srp .srp-hero::before { content: ""; position: absolute; inset: 0px; z-index: -2; background: radial-gradient(850px 540px at 78% 40%, rgba(133, 0, 207, 0.22), transparent 64%), radial-gradient(600px 440px at 18% 52%, rgba(58, 54, 208, 0.18), transparent 62%); } .srp .srp-hero::after { content: ""; position: absolute; inset: 0px; z-index: -1; opacity: 0.22; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(black, transparent 90%); } .srp .srp-hero-grid { display: grid; grid-template-columns: minmax(0px, 1.08fr) minmax(0px, 0.92fr); gap: 72px; align-items: center; } .srp .srp-hero-copy { grid-column: 1; text-align: right; } .srp .srp-hero-visual { grid-area: 1 / 2; height: 520px; position: relative; direction: ltr; } .srp .srp-badge { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 8px 16px; color: rgba(255, 255, 255, 0.9); font-size: 14px; } .srp .srp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(141, 11, 210); box-shadow: rgba(133, 0, 207, 0.14) 0px 0px 0px 7px; animation: 2.2s ease-in-out 0s infinite normal none running srpPulse; } .srp .srp-hero h1 { margin: 22px 0px 0px; font-size: clamp(50px, 6.1vw, 84px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; } .srp .srp-hero p { max-width: 720px; margin: 24px 0px 0px auto; color: var(--muted); font-size: clamp(18px, 1.85vw, 24px); line-height: 1.75; } .srp .srp-hero-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; } .srp .srp-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 13px; font-size: 14px; color: rgba(255, 255, 255, 0.83); } .srp .srp-chip svg { width: 17px; height: 17px; color: rgb(197, 156, 255); } .srp .srp-orbit-glow { position: absolute; inset: 35px; border-radius: 50%; background: radial-gradient(circle, rgba(133, 0, 207, 0.25), rgba(58, 54, 208, 0.1) 45%, transparent 68%); filter: blur(18px); } .srp .srp-orbit { position: absolute; inset: 50px; border: 1px solid rgba(181, 123, 255, 0.32); border-radius: 50%; animation: 18s linear 0s infinite normal none running srpSpin; } .srp .srp-orbit::before, .srp .srp-orbit::after { content: ""; position: absolute; inset: 34px; border: 1px dashed rgba(74, 85, 255, 0.34); border-radius: 50%; } .srp .srp-orbit::after { inset: 82px; border-style: solid; border-color: rgba(255, 255, 255, 0.1); } .srp .srp-core { position: absolute; inset: 50%; width: 154px; height: 154px; transform: translate(-50%, -50%); border-radius: 38px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 58%, rgb(133, 0, 207)); box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px, rgba(133, 0, 207, 0.95) 0px 0px 80px -18px; } .srp .srp-core svg { width: 58px; height: 58px; } .srp .srp-float { position: absolute; display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 800; background: rgba(18, 6, 39, 0.68); border: 1px solid rgba(181, 123, 255, 0.24); backdrop-filter: blur(18px); animation: 6s ease-in-out 0s infinite normal none running srpFloat; } .srp .srp-float svg { width: 17px; height: 17px; color: rgb(201, 166, 255); } .srp .srp-f1 { top: 42px; left: 10px; } .srp .srp-f2 { top: 115px; right: 8px; animation-delay: 0.8s; } .srp .srp-f3 { bottom: 102px; left: 4px; animation-delay: 1.4s; } .srp .srp-f4 { bottom: 40px; right: 35px; animation-delay: 2s; } .srp .srp-rail-svg { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0.72; } .srp .srp-rail-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: 2.4s ease 0.2s 1 normal forwards running srpDraw; } .srp .srp-stats { border-block: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .srp .srp-stats-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .srp .srp-stat-card { border-radius: 26px; padding: 30px; position: relative; overflow: hidden; transition: 0.3s; } .srp .srp-stat-card::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; left: -45px; bottom: -55px; background: rgba(133, 0, 207, 0.16); filter: blur(24px); } .srp .srp-stat-card:hover { transform: translateY(-6px); border-color: rgba(181, 123, 255, 0.3); } .srp .srp-stat-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(133, 0, 207, 0.2); color: rgb(217, 192, 255); } .srp .srp-stat-icon svg { width: 28px; height: 28px; } .srp .srp-stat-value { margin-top: 22px; font-size: clamp(35px, 4vw, 54px); line-height: 1; font-weight: 900; } .srp .srp-stat-card p { margin: 12px 0px 0px; color: var(--muted); font-size: 18px; line-height: 1.65; } .srp .srp-filters { margin: 34px 0px 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .srp .srp-filter { border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.043); color: rgba(255, 255, 255, 0.72); padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 17px; transition: 0.25s; } .srp .srp-filter:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.09); } .srp .srp-filter.is-active { color: rgb(255, 255, 255); border-color: transparent; background: linear-gradient(135deg, rgb(40, 0, 71), rgb(58, 54, 208) 58%, rgb(133, 0, 207)); box-shadow: rgba(133, 0, 207, 0.75) 0px 0px 38px -10px; } .srp .srp-masonry { column-count: 3; column-gap: 18px; direction: rtl; } .srp .srp-project { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 18px; border-radius: 24px; overflow: hidden; transition: opacity 0.28s, transform 0.28s, border-color 0.3s, box-shadow 0.3s; direction: rtl; } .srp .srp-project:hover { border-color: rgba(181, 123, 255, 0.25); box-shadow: rgba(133, 0, 207, 0.9) 0px 26px 70px -42px; } .srp .srp-project.is-hidden { display: none; } .srp .srp-project-image { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.035); } .srp .srp-project-image::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(to top, rgba(9, 0, 22, 0.32), transparent 40%); pointer-events: none; } .srp .srp-project-image img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); } .srp .srp-project:hover .srp-project-image img { transform: scale(1.025); } .srp .srp-zoom-mark { position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(9, 0, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.15); opacity: 0; transform: translateY(5px); transition: 0.25s; } .srp .srp-project:hover .srp-zoom-mark { opacity: 1; transform: none; } .srp .srp-zoom-mark svg { width: 18px; height: 18px; } .srp .srp-project-body { padding: 24px; } .srp .srp-project-type { display: inline-flex; align-items: center; gap: 7px; color: rgb(197, 156, 255); font-size: 13px; font-weight: 800; letter-spacing: 0.03em; } .srp .srp-project-type::before { content: ""; width: 20px; height: 1px; background: rgb(133, 0, 207); } .srp .srp-project h3 { margin: 8px 0px 0px; font-size: 31px; line-height: 1.15; font-weight: 900; } .srp .srp-project-desc { margin: 12px 0px 0px; color: var(--muted); font-size: 17px; line-height: 1.75; } .srp .srp-project-metrics { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.09); display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; } .srp .srp-project-metrics.one { grid-template-columns: 1fr; } .srp .srp-metric { min-width: 0px; border-radius: 15px; padding: 12px; background: rgba(133, 0, 207, 0.1); border: 1px solid rgba(181, 123, 255, 0.12); } .srp .srp-metric strong { display: block; color: rgb(201, 168, 255); font-size: 20px; line-height: 1.25; font-weight: 900; } .srp .srp-metric span { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.58); font-size: 13px; line-height: 1.35; } .srp .srp-feature { border-block: 1px solid rgba(255, 255, 255, 0.08); } .srp .srp-feature-grid { display: grid; grid-template-columns: minmax(0px, 1.08fr) minmax(0px, 0.92fr); gap: 70px; align-items: center; } .srp .srp-feature-copy { grid-column: 1; } .srp .srp-feature-visual { grid-area: 1 / 2; direction: ltr; } .srp .srp-feature-badge { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 9px 15px; background: rgba(58, 54, 208, 0.12); border: 1px solid rgba(74, 85, 255, 0.24); color: rgb(174, 180, 255); font-size: 16px; font-weight: 800; } .srp .srp-feature-badge svg { width: 20px; height: 20px; } .srp .srp-feature h2 { margin: 18px 0px 0px; font-size: clamp(44px, 5vw, 72px); line-height: 1.06; font-weight: 900; } .srp .srp-feature h3 { margin: 12px 0px 0px; color: rgba(255, 255, 255, 0.82); font-size: clamp(22px, 2vw, 30px); } .srp .srp-feature-copy > p { margin: 20px 0px 0px; color: var(--muted); font-size: 20px; line-height: 1.75; } .srp .srp-answer-card { margin-top: 26px; border-radius: 24px; padding: 24px; } .srp .srp-answer-title { display: flex; align-items: center; gap: 12px; font-size: 27px; font-weight: 900; } .srp .srp-answer-title svg { width: 34px; height: 34px; color: rgb(193, 140, 255); } .srp .srp-answer-card p { margin: 10px 0px 0px; color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1.65; } .srp .srp-ai-visual { width: min(100%, 470px); aspect-ratio: 1 / 1; margin-inline: auto; position: relative; display: grid; place-items: center; isolation: isolate; } .srp .srp-ai-glow { position: absolute; inset: 0px; border-radius: 50%; background: radial-gradient(circle, rgba(133, 0, 207, 0.3), rgba(58, 54, 208, 0.14) 45%, transparent 68%); filter: blur(22px); animation: 3s ease-in-out 0s infinite normal none running srpPulse; } .srp .srp-ai-ring { position: absolute; inset: 8%; border: 10px solid rgba(255, 255, 255, 0.055); border-radius: 50%; box-shadow: rgba(133, 0, 207, 0.8) 0px 0px 60px -20px; animation: 16s linear 0s infinite normal none running srpSpin; } .srp .srp-ai-ring::before { content: ""; position: absolute; inset: 12%; border: 3px dashed rgba(74, 85, 255, 0.58); border-radius: 50%; animation: 14s linear 0s infinite normal none running srpSpinReverse; } .srp .srp-ai-core { position: relative; grid-area: 1 / 1; width: 180px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .srp .srp-ai-core svg { width: 76px; height: 76px; filter: drop-shadow(rgba(255, 255, 255, 0.48) 0px 0px 20px); } .srp .srp-ai-core b { display: block; margin-top: 10px; font-size: 24px; letter-spacing: 0.08em; } .srp .srp-shopify { background: linear-gradient(rgba(255, 255, 255, 0.02), transparent); } .srp .srp-shopify .srp-feature-badge { color: rgb(186, 218, 125); background: rgba(149, 191, 71, 0.1); border-color: rgba(149, 191, 71, 0.24); } .srp .srp-shopify-cards { max-width: 560px; margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .srp .srp-shopify-card { border-radius: 20px; padding: 20px; text-align: center; } .srp .srp-shopify-card strong { display: block; color: rgb(168, 205, 96); font-size: 34px; font-weight: 900; } .srp .srp-shopify-card span { display: block; margin-top: 5px; color: var(--muted); font-size: 16px; } .srp .srp-browser { max-width: 560px; margin-inline: auto; border-radius: 26px; padding: 8px; position: relative; } .srp .srp-browser::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 28px; background: linear-gradient(135deg, rgb(74, 85, 255), rgb(144, 0, 255)); filter: blur(16px); opacity: 0.32; } .srp .srp-browser-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); direction: ltr; } .srp .srp-browser-bar span { width: 10px; height: 10px; border-radius: 50%; } .srp .srp-browser-bar span:nth-child(1) { background: rgb(255, 95, 86); } .srp .srp-browser-bar span:nth-child(2) { background: rgb(255, 189, 46); } .srp .srp-browser-bar span:nth-child(3) { background: rgb(39, 201, 63); } .srp .srp-browser-image { max-height: 570px; overflow: auto; border-radius: 0px 0px 19px 19px; background: rgb(255, 255, 255); } .srp .srp-browser-image img { width: 100%; height: auto; cursor: zoom-in; } .srp .srp-footer { padding: 54px 0px 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.18); text-align: center; } .srp .srp-footer img { height: 54px; width: auto; margin-inline: auto; opacity: 0.9; filter: drop-shadow(rgba(74, 85, 255, 0.3) 0px 0px 14px); } .srp .srp-footer p { margin: 18px 0px 0px; color: rgba(255, 255, 255, 0.42); font-size: 15px; } .srp .srp-lightbox { display: none; position: fixed; inset: 0px; z-index: 2147483000; padding: 24px; background: rgba(3, 0, 10, 0.94); backdrop-filter: blur(12px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; cursor: zoom-out; } .srp .srp-lightbox.is-open { display: flex; opacity: 1; } .srp .srp-lightbox img { max-width: min(96vw, 1500px); max-height: 92vh; object-fit: contain; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.75) 0px 28px 100px; transform: scale(0.97); transition: 0.22s; } .srp .srp-lightbox.is-open img { transform: scale(1); } .srp .srp-lightbox-close { position: absolute; top: 20px; left: 20px; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; } .srp .srp-lightbox-close svg { width: 22px; height: 22px; } @keyframes srpPulse { 0%, 100% { opacity: 0.58; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes srpFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-13px); } } @keyframes srpSpin { 100% { transform: rotate(360deg); } } @keyframes srpSpinReverse { 100% { transform: rotate(-360deg); } } @keyframes srpDraw { 100% { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .srp *, .srp ::before, .srp ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .srp .srp-reveal { opacity: 1 !important; transform: none !important; } } @media (max-width: 1050px) { .srp .srp-hero-grid, .srp .srp-feature-grid { grid-template-columns: 1fr; gap: 42px; } .srp .srp-hero-copy, .srp .srp-feature-copy { grid-area: 1 / 1; } .srp .srp-hero-visual, .srp .srp-feature-visual { grid-area: 2 / 1; } .srp .srp-hero-visual { height: 430px; } .srp .srp-masonry { column-count: 2; } .srp .srp-stats-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .srp .srp-container { width: min(100% - 24px, 1280px); } .srp .srp-section { padding: 64px 0px; } .srp .srp-hero { min-height: auto; padding: 68px 0px 58px; } .srp .srp-hero h1 { font-size: 45px; } .srp .srp-hero p { font-size: 18px; } .srp .srp-hero-visual { height: 355px; } .srp .srp-core { width: 120px; height: 120px; border-radius: 30px; } .srp .srp-core svg { width: 46px; height: 46px; } .srp .srp-orbit { inset: 38px; } .srp .srp-float { font-size: 12px; padding: 7px 10px; } .srp .srp-f1 { top: 22px; } .srp .srp-f2 { top: 88px; } .srp .srp-f3 { bottom: 76px; } .srp .srp-f4 { bottom: 20px; } .srp .srp-masonry { column-count: 1; } .srp .srp-section-title { font-size: 42px; } .srp .srp-filters { justify-content: flex-start; margin-bottom: 34px; } .srp .srp-filter { font-size: 15px; padding: 8px 15px; } .srp .srp-project-body { padding: 20px; } .srp .srp-project h3 { font-size: 28px; } .srp .srp-project-desc { font-size: 16px; } .srp .srp-feature h2 { font-size: 44px; } .srp .srp-feature-copy > p { font-size: 18px; } .srp .srp-shopify-cards { grid-template-columns: 1fr 1fr; } .srp .srp-ai-visual { max-width: 360px; } .srp .srp-lightbox { padding: 12px; } } @media (max-width: 430px) { .srp .srp-hero h1 { font-size: 39px; } .srp .srp-hero-visual { height: 315px; } .srp .srp-f2 { right: -4px; } .srp .srp-f1 { left: -4px; } .srp .srp-project-metrics { grid-template-columns: 1fr; } .srp .srp-shopify-card { padding: 16px 10px; } .srp .srp-shopify-card strong { font-size: 28px; } } html, body { margin: 0px !important; padding: 0px !important; width: 100% !important; background: transparent !important; } .srp { background: none transparent !important; } .srp .srp-hero, .srp .srp-section, .srp .srp-stats, .srp .srp-feature, .srp .srp-shopify, .srp .srp-footer { background: none transparent !important; } .srp .srp-hero::before, .srp .srp-hero::after { content: none !important; display: none !important; background: none !important; } .srp .srp-ai-visual { width: min(100%, 470px) !important; aspect-ratio: 1 / 1 !important; margin-inline: auto !important; position: relative !important; display: grid !important; place-items: center !important; isolation: isolate !important; overflow: visible !important; } .srp .srp-ai-glow { position: absolute !important; inset: 0px !important; z-index: 0 !important; pointer-events: none !important; } .srp .srp-ai-ring { position: absolute !important; inset: 8% !important; z-index: 1 !important; pointer-events: none !important; } .srp .srp-ai-core { position: relative !important; inset: auto !important; transform: none !important; grid-area: 1 / 1 !important; width: 180px !important; height: 180px !important; min-width: 180px !important; min-height: 180px !important; padding: 24px 12px !important; margin: 0px !important; border-radius: 50% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; direction: ltr !important; z-index: 5 !important; pointer-events: none !important; background: radial-gradient(circle, rgba(133, 0, 207, 0.2) 0%, rgba(58, 54, 208, 0.08) 52%, transparent 74%) !important; } .srp .srp-ai-core > svg { display: block !important; width: 72px !important; height: 72px !important; margin: 0px auto !important; flex: 0 0 auto !important; color: rgb(255, 255, 255) !important; stroke: currentcolor !important; filter: drop-shadow(rgba(255, 255, 255, 0.44) 0px 0px 20px) !important; } .srp .srp-ai-label { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0px !important; width: 100% !important; margin: 0px !important; color: rgb(255, 255, 255) !important; font-family: Zain, Arial, sans-serif !important; font-size: 24px !important; line-height: 0.92 !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-align: center !important; } .srp .srp-ai-label span { display: block !important; } @media (max-width: 720px) { .srp .srp-ai-core { width: 152px !important; height: 152px !important; min-width: 152px !important; min-height: 152px !important; padding: 19px 10px !important; gap: 8px !important; } .srp .srp-ai-core > svg { width: 58px !important; height: 58px !important; } .srp .srp-ai-label { font-size: 21px !important; } } :root{--sr-bg:#0a0018;--sr-card:#140526;--sr-white:#fff;--sr-muted:rgba(255,255,255,.72);--sr-violet:#8500CF;--sr-indigo:#3A36D0} html{scroll-behavior:smooth;background:var(--sr-bg)} body{margin:0;background:var(--sr-bg);color:#fff;font-family:Zain,Arial,sans-serif;overflow-x:hidden} body.admin-bar .sales-rail-site .sr-nav{top:32px} @media(max-width:782px){body.admin-bar .sales-rail-site .sr-nav{top:46px}} .sr-site-shell{min-height:100vh;overflow-x:clip;background:radial-gradient(1000px 700px at 85% -10%,rgba(133,0,207,.18),transparent 65%),#0a0018} .sr-page-section{position:relative;isolation:isolate;background:#0a0018} .sr-page-section>.sales-rail-site,.sr-page-section>.srp{position:relative;z-index:1}.sr-page-section>.sales-rail-site,.sr-bg-works-hero>.srp{background:transparent} .sr-bg-hero,.sr-bg-methodology,.sr-bg-packages,.sr-bg-vision,.sr-bg-works-hero{background-repeat:no-repeat;background-size:cover;background-position:center top} .sr-bg-hero{background-image:linear-gradient(90deg,rgba(10,0,24,.95),rgba(10,0,24,.38)),url('../images/hero-bg.webp')} .sr-bg-methodology{background-image:linear-gradient(rgba(10,0,24,.25),rgba(10,0,24,.35)),url('../images/methodology-bg.webp')} .sr-bg-packages{background-image:linear-gradient(rgba(10,0,24,.16),rgba(10,0,24,.32)),url('../images/packages-bg.webp');background-position:center} .sr-bg-vision{background-image:linear-gradient(rgba(10,0,24,.18),rgba(10,0,24,.18)),url('../images/vision-bg.webp');background-position:center} .sr-bg-works-hero{background-image:linear-gradient(90deg,rgba(9,0,22,.76),rgba(9,0,22,.2)),url('../images/works-hero-bg.webp');background-position:center 25%} .sr-site-header-wrap{position:relative;z-index:1000} .sr-site-footer-wrap{position:relative;z-index:2} .sr-skip-link{position:fixed;top:-100px;left:20px;z-index:10000;background:#fff;color:#280047;padding:10px 16px;border-radius:8px} .sr-skip-link:focus{top:20px} .sr-reveal,.srp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--delay,0s)} .sr-reveal.is-visible,.srp-reveal.is-visible{opacity:1;transform:none} .srp-project[hidden]{display:none!important} body.sr-lightbox-open{overflow:hidden} .srp-lightbox{display:none} .srp-lightbox.is-open{display:grid} .srn-menu-btn{display:none!important} /* WordPress content pages and blog */ .sr-content-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:140px 0 80px;direction:rtl} .sr-content-hero{text-align:center;max-width:880px;margin:0 auto 54px} .sr-content-hero h1{font-size:clamp(38px,6vw,72px);line-height:1.08;margin:0 0 18px;font-weight:900;background:linear-gradient(90deg,#fff,#d8b6ff);-webkit-background-clip:text;color:transparent} .sr-content-hero p{color:var(--sr-muted);font-size:19px;line-height:1.8} .sr-prose{max-width:840px;margin:0 auto;font-family:Zain,Arial,sans-serif;font-size:19px;line-height:1.95;color:rgba(255,255,255,.88)} .sr-prose h2,.sr-prose h3,.sr-prose h4{color:#fff;line-height:1.3;margin-top:1.8em} .sr-prose a{color:#c793ff}.sr-prose img{max-width:100%;height:auto;border-radius:22px}.sr-prose blockquote{border-right:4px solid #8500CF;margin:2em 0;padding:15px 24px;background:rgba(255,255,255,.05);border-radius:16px} .sr-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .sr-post-card{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 25px 70px -45px #000;transition:.3s} .sr-post-card:hover{transform:translateY(-6px);border-color:rgba(181,123,255,.55)} .sr-post-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#280047,#3A36D0);overflow:hidden}.sr-post-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}.sr-post-card:hover .sr-post-thumb img{transform:scale(1.04)} .sr-post-body{padding:24px;display:flex;flex-direction:column;flex:1}.sr-post-meta{font-size:14px;color:#bfa7d2;margin-bottom:12px}.sr-post-card h2{font-size:25px;line-height:1.35;margin:0 0 12px}.sr-post-card h2 a{text-decoration:none;color:#fff}.sr-post-excerpt{color:var(--sr-muted);line-height:1.8;margin:0 0 18px}.sr-read-more{margin-top:auto;color:#d5a9ff;text-decoration:none;font-weight:700} .sr-pagination{margin-top:46px;display:flex;justify-content:center}.sr-pagination .nav-links{display:flex;gap:8px}.sr-pagination a,.sr-pagination span{display:grid;place-items:center;min-width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none}.sr-pagination .current{background:linear-gradient(135deg,#8500CF,#3A36D0)} .sr-featured-image{max-width:1100px;margin:0 auto 44px}.sr-featured-image img{width:100%;height:auto;border-radius:28px;display:block} .sr-breadcrumbs{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:24px}.sr-breadcrumbs a{color:#d4b1f3;text-decoration:none} .sr-empty{text-align:center;padding:70px 20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:24px} .sr-standard-page .wp-block-group,.sr-standard-page .alignwide{max-width:1180px;margin-inline:auto}.sr-standard-page .alignfull{max-width:none} @media(max-width:900px){.sr-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sr-bg-hero{background-image:linear-gradient(rgba(10,0,24,.72),rgba(10,0,24,.78)),url('../images/hero-bg.webp')}} @media(max-width:620px){.sr-blog-grid{grid-template-columns:1fr}.sr-content-shell{padding-top:110px}.sr-content-hero p{font-size:17px}.sr-prose{font-size:17px}.sr-page-section{background-position:center top}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sr-reveal,.srp-reveal{opacity:1!important;transform:none!important;transition:none!important}}