/* Self-hosted fonts: Cairo (Arabic) and Questrial (English). SIL Open Font License. */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/cairo-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/cairo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/questrial-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Platino Cube: design. Plain CSS, no libraries. Logical properties keep Arabic (RTL) mirrored. */ :root { --bg: #0A1224; --surface: #141E3D; --navy: #1C3158; --steel: #3E5F94; --sky: #6F93CC; --graphite: #313337; --slate: #A0A5AD; --silver: #BABEC4; --light: #D8D8D8; --red: #ED1C24; --text: #F5F7FA; --muted: #C3C8D0; --line: rgba(186, 190, 196, .22); --line-strong: rgba(200, 205, 212, .42); --card: linear-gradient(165deg, rgba(36, 58, 102, .78), rgba(20, 30, 61, .82) 55%, rgba(13, 21, 44, .9)); --radius: 18px; --wrap: 1200px; --gutter: clamp(16px, 4vw, 40px); --header: 72px; --ease: cubic-bezier(.2, .7, .2, 1); --font: 'Questrial', 'Century Gothic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --display-weight: 400; color-scheme: dark; } html[lang="ar"] { --font: 'Cairo', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif; --display-weight: 700; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } html[lang="ar"] body { line-height: 1.8; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-weight: var(--display-weight); line-height: 1.15; margin: 0; letter-spacing: -.01em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--steel); color: #fff; } :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .wrap.narrow { max-width: calc(860px + var(--gutter) * 2); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .muted { color: var(--muted); } .small { font-size: .92rem; } .i { width: 1.15em; height: 1.15em; flex: none; } [dir="rtl"] .i-arrow { transform: scaleX(-1); } bdi { unicode-bidi: isolate; } .skip { position: fixed; inset-inline-start: 16px; top: -60px; z-index: 200; background: var(--light); color: var(--bg); padding: 10px 16px; border-radius: 10px; transition: top .2s; } .skip:focus { top: 12px; } /* ---------- Buttons and links ---------- */ .btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-size: 1rem; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background-color .25s, border-color .25s, box-shadow .25s; } .btn .i { transition: transform .25s var(--ease); } .btn:hover .i-arrow { transform: translateX(3px); } [dir="rtl"] .btn:hover .i-arrow { transform: scaleX(-1) translateX(3px); } .btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 30px -12px rgba(237, 28, 36, .7); } .btn-red:hover { background: #ff2b33; transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(237, 28, 36, .85); } .btn-ghost { border-color: var(--line-strong); color: var(--text); background: rgba(20, 30, 61, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--silver); background: rgba(62, 95, 148, .25); transform: translateY(-2px); } .btn-sm { min-height: 42px; padding: 0 18px; font-size: .95rem; } .link { display: inline-flex; align-items: center; gap: .5em; color: var(--light); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: color .2s, border-color .2s; } .link:hover { color: #fff; border-color: var(--sky); } .link:hover .i-arrow { transform: translateX(3px); } [dir="rtl"] .link:hover .i-arrow { transform: scaleX(-1) translateX(3px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--silver); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .95rem; font-weight: 600; } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--red); border-radius: 2px; } /* ---------- Progress bar ---------- */ .progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; } .progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #767C88, #fff, var(--silver)); } [dir="rtl"] .progress span { transform-origin: right; } /* ---------- Header ---------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; height: var(--header); transition: background-color .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(10, 18, 36, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); } .header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 12px; flex: none; } .logo .mark { width: 26px; height: auto; } .wordmark { display: block; height: 15px; width: auto; flex: none; } .foot-brand .wordmark { height: 17px; } .nav { display: flex; align-items: center; gap: 28px; } .nav-links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; color: var(--silver); font-size: .97rem; padding: 6px 0; transition: color .2s; } .nav-links a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--light); transform: scaleX(0); transition: transform .3s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .lang-switch { font-family: 'Cairo', var(--font); font-size: .95rem; color: var(--light); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 14px; transition: border-color .2s, background-color .2s; } .lang-switch[lang="en"] { font-family: 'Questrial', sans-serif; letter-spacing: .08em; } .lang-switch:hover { border-color: var(--silver); background: rgba(62, 95, 148, .25); } .burger { display: none; } @media (max-width: 1000px) { .nav { display: none; } .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 48px; height: 48px; border-radius: 15px; border: 1px solid var(--line-strong); cursor: pointer; background: linear-gradient(160deg, rgba(186, 190, 196, .2), rgba(20, 30, 61, .6)); } .burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: width .3s var(--ease), transform .3s var(--ease); } .burger i:last-of-type { width: 13px; transform: translateX(-3.5px); } [dir="rtl"] .burger i:last-of-type { transform: translateX(3.5px); } .burger:hover i:last-of-type { width: 20px; transform: none; } } @media (max-width: 420px) { .site-header .wordmark { height: 13px; } } /* ---------- Splash (first visit) ---------- */ .splash { display: none; } .splash-on .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--bg); animation: splash-out .7s var(--ease) 1.75s forwards; } .splash-in { display: grid; justify-items: center; gap: 22px; } .splash-mark { width: 74px; height: auto; overflow: visible; } .splash-mark .bar { animation: bar-in 1s var(--ease) both; transform-box: fill-box; } .splash-mark .b1 { --fx: -160px; --fy: 60px; animation-delay: .1s; } .splash-mark .b2 { --fx: 0; --fy: -220px; animation-delay: .22s; } .splash-mark .b3 { --fx: 220px; --fy: -80px; animation-delay: .34s; } .splash-mark .b4 { --fx: 180px; --fy: 200px; animation-delay: .46s; } .splash-word { height: 18px; animation: fade-up .7s var(--ease) 1s both; } @keyframes bar-in { from { transform: translate(var(--fx), var(--fy)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes splash-out { to { opacity: 0; visibility: hidden; } } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---------- Page transition ---------- */ main, .site-footer { transition: opacity .25s ease, transform .25s ease; } .leaving main, .leaving .site-footer { opacity: 0; transform: translateY(8px); } /* ---------- Reveal on scroll ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); } .js [data-reveal].in { opacity: 1; transform: none; } /* ---------- Sections ---------- */ .sec { padding-block: clamp(72px, 10vw, 130px); position: relative; } .sec-alt { background: linear-gradient(180deg, rgba(20, 30, 61, 0), rgba(20, 30, 61, .65) 18%, rgba(20, 30, 61, .65) 82%, rgba(20, 30, 61, 0)); } .sec-head { margin-bottom: clamp(36px, 5vw, 56px); max-width: 760px; } .sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); } .more { margin-top: 40px; } .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--silver); max-width: 680px; } /* ---------- Home hero: The Cube ---------- */ .hero { position: relative; } .hero-pin, .page-hero { isolation: isolate; } .hero-pin { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: calc(var(--header) + 24px) 40px; } .js .hero { height: 460vh; } .js .hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: calc(var(--header) + 8px) 24px; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: url(../img/hero-bg.webp) center / cover no-repeat, var(--bg); } [dir="rtl"] .hero-bg { transform: scaleX(-1); } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 36, .1), rgba(10, 18, 36, 0) 60%, var(--bg)); } .beam { position: absolute; width: 60vw; height: 60vw; inset-inline-end: -10vw; top: -30vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 147, 204, .22), transparent); animation: drift 14s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate(-6vw, 4vw) scale(1.1); } } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; width: 100%; } .hero-copy { transition: opacity .2s linear, transform .2s linear; } .hero-title { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.025em; margin-bottom: 22px; } html[lang="ar"] .hero-title { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1.25; letter-spacing: 0; } .hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; } .hero-title .line > span { display: inline-block; background: linear-gradient(180deg, #fff 30%, #B9BEC6); -webkit-background-clip: text; background-clip: text; color: transparent; } .js .hero-title .line > span { animation: line-up 1s var(--ease) both; } .js .hero-title .line:nth-child(2) > span { animation-delay: .12s; } .splash-on .hero-title .line > span { animation-delay: 1.9s; } .splash-on .hero-title .line:nth-child(2) > span { animation-delay: 2.02s; } @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } } .hero-support { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--light); margin-bottom: 12px; } .hero-sub { color: var(--muted); max-width: 540px; margin-bottom: 28px; } .trust { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--silver); font-size: .95rem; } .trust-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(237, 28, 36, .18); } .cube-zone { display: grid; justify-items: center; gap: calc(var(--s, 300px) * .32 + 20px); --s: clamp(200px, 22vw, 300px); } .cube-scene { --s: inherit; width: var(--s); height: var(--s); perspective: 1700px; position: relative; outline: none; cursor: grab; } .cube-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tx, -16deg)) rotateY(var(--ty, 24deg)); transition: transform .5s var(--ease); } .cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } .face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: calc(var(--s) * .09); border-radius: 6px; overflow: hidden; border: 1px solid rgba(216, 216, 216, .34); background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%), linear-gradient(160deg, #24365F, #141E3D 55%, #0D1630); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -40px 80px rgba(10, 18, 36, .6); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: var(--t) translateZ(calc(var(--s) / 2 + var(--open, 0px))); opacity: var(--fo, 1); } .face::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); } .f0 { --t: rotateY(0deg); } .f1 { --t: rotateY(90deg); } .f2 { --t: rotateY(180deg); } .f3 { --t: rotateY(-90deg); } .f4 { --t: rotateX(90deg); } .f5 { --t: rotateX(-90deg); } [dir="rtl"] .f1 { --t: rotateY(-90deg); } [dir="rtl"] .f3 { --t: rotateY(90deg); } .face-num { position: absolute; top: calc(var(--s) * .08); inset-inline-start: calc(var(--s) * .09); font-size: .8rem; letter-spacing: .2em; color: var(--slate); } .face-icon { position: absolute; top: calc(var(--s) * .08); inset-inline-end: calc(var(--s) * .09); width: calc(var(--s) * .16); height: calc(var(--s) * .16); color: var(--light); } .face-name { font-size: calc(var(--s) * .095); line-height: 1.15; color: #fff; } html[lang="ar"] .face-name { font-weight: 700; } .face-line { font-size: calc(var(--s) * .048); line-height: 1.45; color: var(--silver); } .cube-floor { position: absolute; inset-inline: -10%; bottom: -34%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 147, 204, .35), transparent); filter: blur(6px); transform: translateZ(0); } .quip { position: absolute; inset-inline-start: 50%; top: -22px; transform: translate(-50%, -100%) scale(.9); white-space: nowrap; padding: 9px 16px; border-radius: 999px; font-size: .92rem; background: var(--light); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); } [dir="rtl"] .quip { transform: translate(50%, -100%) scale(.9); } .quip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--light); transform: translateX(-50%) rotate(45deg); } .cube-scene.show-quip .quip { opacity: 1; transform: translate(-50%, -100%); } [dir="rtl"] .cube-scene.show-quip .quip { transform: translate(50%, -100%); } .cube-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 460px; font-size: .86rem; } .cube-index li { display: inline-flex; gap: 6px; align-items: center; color: rgba(160, 165, 173, .6); transition: color .3s; } .cube-index li span { font-size: .72rem; letter-spacing: .1em; } .cube-index li.on { color: #fff; } .cube-index li.on span { color: var(--red); } .hero-end { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; pointer-events: none; opacity: 0; padding-inline: var(--gutter); } .js .hero-end { display: flex; } .hero-end.on { pointer-events: auto; } .end-title { font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #fff 35%, #9BA1AB); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; } html[lang="ar"] .end-title { font-weight: 700; letter-spacing: 0; line-height: 1.3; } .end-sub { color: var(--silver); font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 14px; } .scroll-hint { position: absolute; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--slate); transition: opacity .3s; } [dir="rtl"] .scroll-hint { transform: translateX(50%); letter-spacing: 0; } .js .scroll-hint { display: flex; } .scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--silver), transparent); animation: hint 1.8s ease-in-out infinite; transform-origin: top; } @keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } /* Marquee (service ticker) */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; background: rgba(20, 30, 61, .4); } .marquee-track { display: flex; width: max-content; align-items: center; gap: 36px; animation: marquee 38s linear infinite; } [dir="rtl"] .marquee-track { animation-name: marquee-rtl; } .marquee span { font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--silver); white-space: nowrap; } .marquee i { width: 10px; height: 18px; background: linear-gradient(180deg, #fff, #767C88); transform: skewY(-28deg); border-radius: 2px; flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes marquee-rtl { to { transform: translateX(50%); } } /* Intro: words light up */ .intro { padding-block: clamp(90px, 12vw, 160px); } .big-words { font-size: clamp(1.5rem, 3.1vw, 2.45rem); line-height: 1.4; color: var(--light); } html[lang="ar"] .big-words { line-height: 1.75; } .big-words .w { opacity: .18; transition: opacity .35s ease; } .big-words .w.lit { opacity: 1; } /* ---------- Cards ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .card { position: relative; display: block; padding: 30px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .5s var(--ease), opacity .8s var(--ease); transform-style: preserve-3d; } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(111, 147, 204, .18), transparent 60%); } .card:hover { border-color: var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); } .card:hover::before { opacity: 1; } .card h3 { font-size: 1.35rem; margin-bottom: 10px; } .card p { color: var(--muted); } .card-num { position: absolute; top: 26px; inset-inline-end: 28px; font-size: .78rem; letter-spacing: .18em; color: var(--slate); } .card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 26px; color: var(--light); background: linear-gradient(160deg, rgba(186, 190, 196, .2), rgba(186, 190, 196, .04)); border: 1px solid var(--line); } .card-icon .i { width: 24px; height: 24px; } .card-go { position: absolute; bottom: 26px; inset-inline-end: 28px; color: var(--slate); transition: color .3s, transform .3s var(--ease); } .svc-card { padding-bottom: 64px; } .svc-card:hover .card-go { color: #fff; transform: translateX(4px); } [dir="rtl"] .svc-card:hover .card-go { transform: translateX(-4px); } /* Why + numbers */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .why-item { border-top: 1px solid var(--line-strong); padding-top: 22px; } .why-num { display: block; font-size: .78rem; letter-spacing: .18em; color: var(--red); margin-bottom: 14px; } .why-item h3 { font-size: 1.25rem; margin-bottom: 8px; } .why-item p { color: var(--muted); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(56px, 7vw, 90px); } .stat { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 18, 36, .35); } .stat-num { display: block; font-size: clamp(3.2rem, 6vw, 4.8rem); line-height: 1; margin-bottom: 10px; background: linear-gradient(180deg, #fff, #8F96A1); -webkit-background-clip: text; background-clip: text; color: transparent; } html[lang="ar"] .stat-num { font-family: 'Questrial', sans-serif; } .stat-label { color: var(--silver); } /* Steps: Plan, Create, Grow */ .steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .steps-line { position: absolute; inset-inline: 0; top: 7px; height: 2px; background: var(--line); } .steps-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--silver), #fff); transform: scaleX(var(--fill, 0)); transform-origin: left; } [dir="rtl"] .steps-fill { transform-origin: right; background: linear-gradient(270deg, var(--silver), #fff); } .step { position: relative; padding-top: 44px; } .step-dot { position: absolute; top: 0; inset-inline-start: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background-color .4s, border-color .4s, box-shadow .4s; } .step.on .step-dot { background: var(--light); border-color: #fff; box-shadow: 0 0 0 6px rgba(216, 216, 216, .12), 0 0 24px rgba(111, 147, 204, .6); } .step-num { display: block; font-size: .78rem; letter-spacing: .18em; color: var(--slate); margin-bottom: 10px; } .step h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 10px; color: var(--slate); transition: color .4s; } .step.on h3 { color: #fff; } .step p { color: var(--muted); max-width: 340px; } /* Clients (text tiles until logo files arrive) */ .clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .client, .logo-tile { position: relative; display: grid; place-items: center; text-align: center; gap: 8px; min-height: 170px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 18, 36, .35); overflow: hidden; transition: border-color .35s, background-color .35s, opacity .8s var(--ease), transform .8s var(--ease); } .client-name, .logo-name { font-family: 'Questrial', sans-serif; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: .04em; color: var(--slate); filter: grayscale(1); transition: color .35s, text-shadow .35s; } .client-sv, .logo-sv { font-size: .88rem; color: var(--slate); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); } .client:hover, .logo-tile:hover { border-color: var(--line-strong); background: rgba(28, 49, 88, .5); } .client:hover .client-name, .logo-tile:hover .logo-name { color: #fff; text-shadow: 0 0 30px rgba(111, 147, 204, .6); } .client:hover .client-sv, .logo-tile:hover .logo-sv { opacity: 1; transform: none; color: var(--silver); } @media (hover: none) { .client-sv, .logo-sv { opacity: 1; transform: none; } } /* CTA band */ .cta-band { padding-block: clamp(60px, 8vw, 110px); } .cta-card { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 90px) clamp(22px, 5vw, 60px); border-radius: 28px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, #1C3158, #141E3D 60%, #0A1224); display: grid; justify-items: center; gap: 18px; } .cta-glow { position: absolute; width: 70%; height: 120%; top: -60%; inset-inline-start: 15%; background: radial-gradient(closest-side, rgba(111, 147, 204, .3), transparent); pointer-events: none; } .cta-mark { width: 44px; height: auto; position: relative; } .cta-card h2 { position: relative; font-size: clamp(1.9rem, 4.2vw, 3.2rem); max-width: 760px; } .cta-card p { position: relative; color: var(--silver); max-width: 560px; font-size: 1.1rem; } .cta-card .btns { position: relative; justify-content: center; margin-top: 10px; } /* ---------- Inner page hero ---------- */ .page-hero { position: relative; padding-block: calc(var(--header) + clamp(70px, 10vw, 130px)) clamp(50px, 7vw, 90px); overflow: hidden; } .page-hero-sm { padding-bottom: 30px; } .page-hero-bg { position: absolute; inset: 0; z-index: -1; background: url(../img/hero-bg.webp) 70% 0 / cover no-repeat; opacity: .75; } [dir="rtl"] .page-hero-bg { transform: scaleX(-1); } .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 36, .2), var(--bg)); } .page-title { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 22px; max-width: 900px; background: linear-gradient(180deg, #fff 35%, #B3B8C1); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } html[lang="ar"] .page-title { line-height: 1.3; letter-spacing: 0; } /* About */ .story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; } .story-head h2 { font-size: clamp(2rem, 4vw, 3rem); position: sticky; top: calc(var(--header) + 40px); } .story-text { display: grid; gap: 22px; color: var(--light); font-size: 1.12rem; } .voice { margin-top: 18px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.2; background: linear-gradient(90deg, #fff, var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; } [dir="rtl"] .voice { background-image: linear-gradient(270deg, #fff, var(--sky)); line-height: 1.5; } .feature h3 { font-size: 1.2rem; } .mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .mv-card { padding: clamp(30px, 4vw, 48px); } .mv-label { display: inline-block; color: var(--silver); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; border-bottom: 2px solid var(--red); padding-bottom: 6px; } html[lang="ar"] .mv-label { letter-spacing: 0; font-size: 1rem; font-weight: 700; } .mv-card p { color: var(--light); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; } .values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .value { display: grid; gap: 18px; align-content: start; padding: 26px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20, 30, 61, .4); transition: border-color .3s, opacity .8s var(--ease), transform .8s var(--ease); } .value:hover { border-color: var(--line-strong); } .value-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--light); } .value h3 { font-size: 1.08rem; margin-bottom: 6px; } .value p { color: var(--muted); font-size: .95rem; } /* Services page */ .svc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 60px; align-items: start; } .svc-index { position: sticky; top: calc(var(--header) + 30px); } .svc-index ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); } .svc-index a { display: flex; gap: 10px; padding: 9px 18px; color: var(--slate); font-size: .95rem; margin-inline-start: -1px; border-inline-start: 2px solid transparent; transition: color .25s, border-color .25s; } .svc-index a span { font-size: .72rem; letter-spacing: .1em; padding-top: .3em; } .svc-index a:hover { color: var(--light); } .svc-index a.on { color: #fff; border-color: var(--red); } .svc-list { display: grid; gap: 22px; } .svc { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: clamp(28px, 4vw, 46px); border-radius: 24px; border: 1px solid var(--line); background: var(--card); scroll-margin-top: calc(var(--header) + 24px); } .svc-side { display: grid; align-content: start; gap: 18px; } .svc-num { font-size: 3.4rem; line-height: 1; font-family: 'Questrial', sans-serif; background: linear-gradient(180deg, #fff, #5E6470); -webkit-background-clip: text; background-clip: text; color: transparent; } .svc-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; border: 1px solid var(--line-strong); color: var(--light); } .svc-icon .i { width: 26px; height: 26px; } .svc-body h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 8px; } .svc-tag { color: var(--sky); font-size: 1.12rem; margin-bottom: 22px; } .checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; } .checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--light); } .checks .i { color: var(--silver); margin-top: .3em; } .best { color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); } .best strong { color: var(--light); font-weight: 400; } html[lang="ar"] .best strong { font-weight: 700; } /* Portfolio */ .logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .logo-tile { min-height: 260px; } /* Contact */ .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; } .contact-card h2, .form-card h2 { font-size: 1.6rem; margin-bottom: 22px; } .form-card h2 { margin-bottom: 6px; } .details { margin: 0 0 26px; display: grid; gap: 18px; } .details dt { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: .88rem; margin-bottom: 2px; } .details dd { margin: 0; color: var(--light); font-size: 1.05rem; } .details a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .social-label { color: var(--slate); font-size: .88rem; margin: 26px 0 10px; } .socials { display: flex; gap: 10px; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--silver); transition: color .2s, border-color .2s, transform .2s; } .socials a:hover { color: #fff; border-color: var(--silver); transform: translateY(-2px); } .socials .i { width: 19px; height: 19px; } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 24px; } .field { display: grid; gap: 7px; } .field.full { grid-column: 1 / -1; } .field label { font-size: .92rem; color: var(--silver); } .req { color: var(--red); } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; background: rgba(10, 18, 36, .6); border: 1px solid var(--line-strong); color: var(--text); transition: border-color .2s, box-shadow .2s; } html[lang="ar"] .field input[dir="ltr"] { text-align: right; } .field textarea { resize: vertical; min-height: 130px; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--silver) 50%), linear-gradient(135deg, var(--silver) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 42px; } [dir="rtl"] .field select { background-position: 16px 22px, 22px 22px; } .field select option { background: var(--surface); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(111, 147, 204, .22); } .field.invalid input { border-color: var(--red); } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; } .form-status { font-size: .95rem; color: var(--silver); } .form-status.error { color: #ff8a8f; } .form button[disabled] { opacity: .7; cursor: progress; } .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .thanks { text-align: center; padding: 40px 10px 20px; display: grid; justify-items: center; gap: 12px; } .thanks[hidden] { display: none; } .thanks-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(216, 216, 216, .12); border: 1px solid var(--line-strong); color: #fff; animation: pop .6s var(--ease) both; } .thanks-icon .i { width: 30px; height: 30px; } .thanks h3 { font-size: 1.6rem; } .thanks p { color: var(--silver); max-width: 420px; } @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .faq { display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 18, 36, .4); transition: border-color .3s, opacity .8s var(--ease), transform .8s var(--ease); } .faq-item[open] { border-color: var(--line-strong); } .faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; font-size: 1.08rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .i { color: var(--silver); transition: transform .3s var(--ease); } .faq-item[open] summary .i { transform: rotate(45deg); } .faq-a { padding: 0 24px 22px; color: var(--muted); } /* Legal */ .legal-list { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 18px; color: var(--light); } .legal-list li::marker { color: var(--slate); } .legal-list strong { font-weight: 400; color: #fff; } html[lang="ar"] .legal-list strong { font-weight: 700; } .legal a, .faq a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } .legal { padding-top: 30px; } /* 404 */ .nf-in { text-align: center; display: grid; justify-items: center; } .nf .lead { margin-bottom: 28px; } .nf-code { font-size: 1rem; letter-spacing: .4em; color: var(--red); margin-bottom: 10px; } .nf-ar { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); font-family: 'Cairo', sans-serif; color: var(--silver); display: grid; justify-items: center; gap: 8px; } .nf-ar-title { font-size: 1.5rem; font-weight: 700; color: #fff; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding-block: 70px 30px; background: linear-gradient(180deg, transparent, rgba(20, 30, 61, .5)); } .foot-grid { display: grid; grid-template-columns: 1.3fr .7fr 1.2fr; gap: 40px; } .foot-brand .logo .mark { width: 30px; } .foot-tag { color: var(--silver); margin: 18px 0 22px; } .foot-h { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; font-weight: 400; } html[lang="ar"] .foot-h { letter-spacing: 0; font-size: .95rem; } .foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--light); } .foot-list li { display: flex; gap: 10px; align-items: flex-start; } .foot-list li > span { flex: 1; min-width: 0; } /* the text wraps beside the icon, never below it */ .foot-list .i { color: var(--slate); margin-top: .3em; flex-shrink: 0; } .foot-list a:hover { color: #fff; } .foot-hours > span { display: block; } /* days on one line, time on the next */ .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--slate); font-size: .92rem; } .foot-bottom { padding-inline-end: 84px; } .intro-head { margin-bottom: 28px; } .intro-head h2 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--silver); letter-spacing: .02em; } .foot-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; } .foot-legal a:hover { color: #fff; } /* Floating WhatsApp */ .wa-float { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--light); color: var(--bg); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7); transition: transform .25s var(--ease), background-color .25s; } .wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(216, 216, 216, .6); animation: pulse 2.6s ease-out infinite; } .wa-float .i { width: 28px; height: 28px; } .wa-float:hover { transform: translateY(-3px) scale(1.04); background: #fff; } @keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } /* Cookie banner (built by analytics.js) */ .pc-cookie { position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 150; max-width: 420px; width: calc(100% - 40px); padding: 20px 22px; border-radius: 18px; background: rgba(20, 30, 61, .96); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); color: var(--light); font-size: .95rem; animation: fade-up .5s var(--ease) both; } .pc-cookie p { margin-bottom: 14px; } .pc-cookie a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } .pc-cookie-btns { display: flex; gap: 10px; } .pc-cookie button { min-height: 42px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--light); } .pc-cookie button[data-accept] { background: var(--light); color: var(--bg); border-color: var(--light); } .pc-cookie button:hover { border-color: #fff; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .values { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .svc-layout { grid-template-columns: 1fr; } .svc-index { display: none; } } @media (max-width: 860px) { .grid-3, .clients, .logo-grid { grid-template-columns: 1fr 1fr; } .story-grid, .contact-grid, .mv { grid-template-columns: 1fr; gap: 24px; } .story-head h2 { position: static; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .checks { grid-template-columns: 1fr; } .hero-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; justify-items: center; } .hero-copy .btns, .trust { justify-content: center; } .hero-sub { margin-inline: auto; } .eyebrow { justify-content: center; } .hero-copy .eyebrow { margin-bottom: 12px; } .cube-zone { --s: clamp(150px, 40vw, 220px); gap: 16px; margin-top: 30px; } .cube-index, .js .scroll-hint { display: none; } .js .hero { height: 380vh; } .hero-bg { background-image: url(../img/hero-bg-m.webp); } } @media (max-width: 860px) and (max-height: 900px) { .js .hero-sub { display: none; } } @media (max-width: 600px) { body { font-size: 16px; } .grid-3, .grid-4, .clients, .logo-grid, .why-grid, .values, .stats { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 34px; padding-inline-start: 34px; } .steps-line { inset-inline: auto; inset-inline-start: 7px; top: 0; bottom: 0; width: 2px; height: auto; } .steps-fill, [dir="rtl"] .steps-fill { transform: scaleY(var(--fill, 0)); transform-origin: top; background: linear-gradient(180deg, var(--silver), #fff); } .step { padding-top: 0; } .step-dot { inset-inline-start: -34px; top: 6px; } .form { grid-template-columns: 1fr; } .svc { grid-template-columns: 1fr; gap: 16px; } .svc-side { grid-auto-flow: column; justify-content: space-between; align-items: center; } .card, .stat { padding: 24px; } .foot-grid { grid-template-columns: 1fr; } .btns .btn { flex: 1 1 auto; } .hero .btns .btn { padding: 0 18px; } .stat { display: flex; align-items: baseline; gap: 18px; } .stat-num { font-size: 3rem; margin: 0; } .wa-float { width: 52px; height: 52px; inset-inline-end: 16px; bottom: 16px; } .pc-cookie { inset-inline: 12px; bottom: 12px; width: auto; max-width: none; } .logo-tile { min-height: 180px; } } @media (max-width: 860px) and (max-height: 700px) { .hero-support { display: none; } .hero-title { font-size: 2.3rem; margin-bottom: 14px; } .cube-zone { --s: 140px; } } /* ---------- Reduced motion: a calm, static version ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .js .hero { height: auto; } .js .hero-pin { position: relative; height: auto; min-height: 100svh; } .js .hero-end { display: none; } .js .scroll-hint { display: none; } .js .hero-sub { display: block; } .js [data-reveal] { opacity: 1; transform: none; } .big-words .w { opacity: 1; } .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; } .marquee-track > :nth-child(n + 13) { display: none; } .wa-float::before { display: none; } .splash { display: none !important; } } /* Platino Cube: visuals layer (icons, illustrations, dashboard, About diagrams, 3D hooks). */ /* ---------- Duotone icons ---------- */ .i .duo { color: var(--sky); opacity: .3; } /* ---------- 3D cube hooks ---------- */ .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero-grid { position: relative; z-index: 1; } .hero-end { z-index: 2; } .has-3d .cube-tilt, .has-3d .cube-floor { visibility: hidden; } .end-mark { height: clamp(80px, 13vh, 130px); aspect-ratio: 1012 / 1388; margin-bottom: 14px; } .end-mark .mark { width: 100%; height: 100%; filter: drop-shadow(0 16px 30px rgba(111, 147, 204, .45)); } .has-3d .end-mark .mark { visibility: hidden; } .beam-2 { inset-inline-end: auto; inset-inline-start: -25vw; top: auto; bottom: -35vw; background: radial-gradient(closest-side, rgba(237, 28, 36, .09), transparent); animation-duration: 19s; } /* ---------- Section heads ---------- */ .sec-head .eyebrow::before { display: none; } .sec-head .eyebrow { gap: 14px; margin-bottom: 20px; } .sec-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(160deg, rgba(186, 190, 196, .28), rgba(186, 190, 196, .05)); border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -12px rgba(111, 147, 204, .8); } .sec-badge .i { width: 22px; height: 22px; } .sec-num { font-size: .85rem; letter-spacing: .22em; color: var(--silver); display: inline-flex; align-items: center; gap: 12px; } .sec-num::after { content: ''; width: 30px; height: 2px; border-radius: 2px; background: var(--red); } .sec-text { margin-top: 18px; color: var(--muted); font-size: 1.12rem; max-width: 640px; } .sec-head h2 { color: #fff; } .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .js .sw > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); } .js .in .sw > span { transform: none; } /* ---------- Stronger sections + cards ---------- */ .sec-alt { background: linear-gradient(180deg, rgba(20, 30, 61, 0), rgba(22, 34, 68, .9) 14%, rgba(22, 34, 68, .9) 86%, rgba(20, 30, 61, 0)); } .sec-alt::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(186, 190, 196, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 190, 196, .055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); } .sec-alt > .wrap { position: relative; } .card::after { content: ''; position: absolute; inset-inline: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); pointer-events: none; } .card:hover { border-color: rgba(220, 226, 236, .55); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), 0 0 46px -14px rgba(111, 147, 204, .55); } .card h3 { color: #fff; } .card-icon { color: #fff; background: linear-gradient(160deg, rgba(111, 147, 204, .35), rgba(111, 147, 204, .06)); border-color: var(--line-strong); box-shadow: 0 10px 26px -14px rgba(111, 147, 204, .9); } .intro { position: relative; overflow: hidden; } .intro-glow { position: absolute; width: 70vw; height: 50vw; left: 15vw; top: 10%; background: radial-gradient(closest-side, rgba(62, 95, 148, .28), transparent); pointer-events: none; } .intro .wrap { position: relative; } .marquee { background: linear-gradient(90deg, rgba(20, 30, 61, .7), rgba(28, 49, 88, .7), rgba(20, 30, 61, .7)); } .marquee span { display: inline-flex; align-items: center; gap: 14px; color: #E3E6EB; } .marquee span .i { width: .85em; height: .85em; color: #fff; } .marquee .marquee-track { animation-play-state: paused; } .marquee.play .marquee-track { animation-play-state: running; } /* ---------- Illustrations (shared) ---------- */ .illus { position: relative; height: 200px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(111, 147, 204, .28), transparent 60%), linear-gradient(180deg, #16244a, #0c1530); } .illus * { animation-play-state: paused; } .illus.play * { animation-play-state: running; } .illus .mark { height: auto; } @keyframes float { 50% { transform: translateY(-9px); } } @keyframes blink { 50% { opacity: 0; } } .post { background: #15203f; border-radius: 10px; padding: 6px; border: 1px solid rgba(255, 255, 255, .07); } .post-head { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .av { display: block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #fff, #6F93CC); flex: none; } .post-head b { display: block; height: 4px; width: 42px; border-radius: 2px; background: rgba(255, 255, 255, .3); } .post-img { height: 70px; border-radius: 7px; display: grid; place-items: center; } .post-img .mark { width: 18px; opacity: .95; } .pi1 { background: linear-gradient(135deg, #3E5F94, #0A1224); } .pi2 { background: linear-gradient(135deg, #ED1C24 -60%, #1C3158 55%); } .pi3 { background: linear-gradient(135deg, #BABEC4, #3E5F94); } .pi4 { background: linear-gradient(135deg, #6F93CC, #141E3D); } .post-act { display: flex; gap: 6px; margin-top: 6px; color: #e3e6eb; } .post-act .i { width: 11px; height: 11px; } .post-act .i-heart { color: var(--red); } .post-act .i-heart .duo { color: var(--red); opacity: 1; } .cap { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); margin-top: 5px; width: 80%; } .cap.short { width: 50%; } /* Social: phone with a moving feed */ .il-social .phone { position: absolute; left: 50%; top: 20px; width: 124px; height: 240px; margin-left: -62px; border-radius: 22px; overflow: hidden; border: 2px solid #cdd1d7; background: #0a1224; box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .8), inset 0 0 0 3px #0a1224; } .il-social .notch { position: absolute; top: 6px; left: 50%; width: 40px; height: 8px; margin-left: -20px; border-radius: 6px; background: #000; z-index: 2; } .il-social .feed { position: absolute; inset-inline: 7px; top: 22px; display: flex; flex-direction: column; gap: 7px; animation: feed 16s linear infinite; } @keyframes feed { to { transform: translateY(-50%); } } .bubble { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--light); color: var(--red); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .7); animation: float 4s ease-in-out infinite; } .bubble .i { width: 19px; height: 19px; } .bubble .duo { color: currentColor; opacity: .25; } .bb1 { left: 16%; top: 42%; } .bb2 { right: 15%; top: 24%; color: var(--steel); animation-delay: -1.3s; } .bb3 { right: 20%; bottom: 18%; color: var(--navy); animation-delay: -2.6s; } /* Content: video screen + timeline */ .il-content .screen { position: absolute; left: 11%; right: 11%; top: 18px; height: 112px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #24406f, #0A1224); border: 1px solid var(--line-strong); } .rec { position: absolute; top: 10px; inset-inline-start: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; } .il-content .play { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 9px rgba(255, 255, 255, .12); } .il-content .play .i { width: 20px; height: 20px; margin-inline-start: 3px; fill: currentColor; } [dir="rtl"] .il-content .play .i { margin-inline-start: 0; margin-inline-end: 3px; } .wave { position: absolute; bottom: 10px; left: 12px; right: 12px; height: 26px; display: flex; align-items: flex-end; gap: 3px; } .wave i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: linear-gradient(#9DB8EA, #3E5F94); transform-origin: bottom; animation: wave 1.3s ease-in-out infinite alternate; } .wave i:nth-child(3n) { animation-delay: -.5s; } .wave i:nth-child(2n) { animation-delay: -.9s; } @keyframes wave { from { transform: scaleY(.25); } } .track { position: absolute; left: 11%; right: 11%; bottom: 20px; height: 32px; border-radius: 9px; background: #0a1224; border: 1px solid var(--line); display: flex; gap: 3px; padding: 4px; direction: ltr; } .clip { border-radius: 4px; } .c1 { flex: 2; background: #3E5F94; } .c2 { flex: 1.2; background: #6F93CC; } .c3 { flex: 2.4; background: #1C3158; border: 1px solid #3E5F94; } .c4 { flex: 1; background: var(--red); opacity: .85; } .head { position: absolute; top: -6px; bottom: -6px; width: 2px; left: 4%; background: #fff; box-shadow: 0 0 10px #fff; animation: head 6s linear infinite; } @keyframes head { to { left: 96%; } } /* Branding: brand board */ .il-brand .board { position: absolute; inset: 18px 12% 16px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr auto; gap: 8px; } .b-logo { background: linear-gradient(160deg, #24406f, #0A1224); border-radius: 12px; border: 1px solid var(--line-strong); display: grid; place-items: center; align-content: center; gap: 5px; } .b-logo .mark { width: 30px; animation: float 3.4s ease-in-out infinite; } .b-logo i { display: block; width: 46px; height: 3px; background: rgba(255, 255, 255, .35); border-radius: 2px; } .b-logo i + i { width: 30px; } .b-type { background: #E8EAEE; color: #0A1224; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .b-type span { font-family: 'Questrial', sans-serif; font-size: 2.1rem; line-height: 1; } .b-type i { display: block; height: 3px; border-radius: 2px; background: #0A1224; opacity: .35; width: 80%; } .b-type i + i { width: 55%; } .b-sw { grid-column: 1 / -1; display: flex; gap: 6px; height: 30px; } .b-sw span { flex: 1; border-radius: 7px; background: var(--c); border: 1px solid rgba(255, 255, 255, .18); animation: float 3.6s ease-in-out infinite; } .b-sw span:nth-child(2) { animation-delay: -.3s; } .b-sw span:nth-child(3) { animation-delay: -.6s; } .b-sw span:nth-child(4) { animation-delay: -.9s; } .b-sw span:nth-child(5) { animation-delay: -1.2s; } .b-sw span:nth-child(6) { animation-delay: -1.5s; } .b-card { position: absolute; inset-inline-end: -6%; bottom: 30px; width: 40%; height: 54px; transform: rotate(-9deg); border-radius: 9px; background: #F4F5F7; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); display: flex; align-items: center; gap: 8px; padding: 0 12px; } .b-card span .mark { width: 14px; filter: brightness(.3); } .b-card i { display: block; height: 3px; width: 34%; border-radius: 2px; background: #0A1224; opacity: .35; } /* Events: stage with moving lights */ .il-event .led { position: absolute; left: 50%; top: 24px; width: 46%; height: 82px; transform: translateX(-50%); border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #24406f, #0A1224); border: 1px solid var(--line-strong); box-shadow: 0 0 44px rgba(111, 147, 204, .4); } .il-event .led .mark { width: 28px; } .beam { position: absolute; top: -24px; width: 70px; height: 230px; background: linear-gradient(180deg, rgba(216, 226, 255, .55), transparent 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform-origin: top center; mix-blend-mode: screen; animation: sweep 5s ease-in-out infinite alternate; } .beam.b1 { left: 8%; animation-delay: -1s; } .beam.b2 { left: 44%; animation-duration: 6.5s; } .beam.b3 { right: 8%; animation-delay: -2.5s; } @keyframes sweep { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } } .podium { position: absolute; left: 50%; top: 116px; width: 30%; height: 9px; transform: translateX(-50%); border-radius: 3px; background: linear-gradient(90deg, #8f96a1, #fff, #8f96a1); } .crowd { position: absolute; left: 5%; right: 5%; bottom: 10px; display: flex; justify-content: space-between; } .crowd i { position: relative; width: 16px; height: 22px; border-radius: 8px 8px 3px 3px; background: #22396a; animation: float 2.6s ease-in-out infinite; } .crowd i:nth-child(odd) { animation-delay: -1.2s; height: 18px; } .crowd i::before { content: ''; position: absolute; top: -11px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #2e4a80; } .badge-card { position: absolute; inset-inline-end: 7%; top: 34px; width: 56px; height: 78px; border-radius: 9px; background: #F4F5F7; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 14px; transform-origin: top center; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); animation: swing 3s ease-in-out infinite alternate; } .lanyard { position: absolute; top: -34px; left: 50%; width: 2px; height: 34px; background: var(--red); } .badge-card .mark { width: 16px; filter: brightness(.3); } .badge-card i { display: block; width: 60%; height: 3px; border-radius: 2px; background: #0A1224; opacity: .35; } @keyframes swing { from { transform: rotate(5deg); } to { transform: rotate(-7deg); } } /* Websites: browser with code typing */ .il-web .browser { position: absolute; inset: 18px 8% -12px; border-radius: 12px 12px 0 0; overflow: hidden; background: #0b1328; border: 1px solid var(--line-strong); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8); } .il-web .bar { height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #141E3D; border-bottom: 1px solid var(--line); } .il-web .bar i { width: 7px; height: 7px; border-radius: 50%; background: #3E5F94; } .il-web .bar i:first-child { background: var(--red); } .il-web .url { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .09); margin-inline-start: 8px; } .il-web .win { display: grid; grid-template-columns: 1fr 1fr; height: calc(100% - 24px); } .il-web .code { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-inline-end: 1px solid var(--line); } .il-web .code i { display: block; height: 5px; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #9DB8EA, #3E5F94); transform-origin: left; animation: type 4.4s steps(14) infinite; animation-delay: var(--d); } [dir="rtl"] .il-web .code i { transform-origin: right; } .il-web .code i:nth-child(3n) { background: linear-gradient(90deg, #E3E6EB, #6F93CC); } .il-web .code i:nth-child(4n) { margin-inline-start: 12px; background: var(--red); opacity: .75; } @keyframes type { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } } .il-web .prev { padding: 10px; display: flex; flex-direction: column; gap: 7px; } .p-nav { height: 6px; width: 60%; border-radius: 3px; background: rgba(255, 255, 255, .22); } .p-hero { height: 58px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #3E5F94, #141E3D); animation: build 4.4s ease infinite; } .p-hero .mark { width: 16px; } .p-row { display: flex; gap: 5px; } .p-row i { flex: 1; height: 28px; border-radius: 6px; background: #22396a; animation: build 4.4s ease infinite; } .p-row i:nth-child(2) { animation-delay: .2s; } .p-row i:nth-child(3) { animation-delay: .4s; } @keyframes build { 0%, 18% { opacity: 0; transform: translateY(8px); } 38%, 100% { opacity: 1; transform: none; } } /* Software and AI: node network */ .il-ai .net { position: absolute; left: 8%; top: 14px; width: 84%; height: calc(100% - 28px); overflow: visible; } .il-ai .links line { stroke: rgba(186, 190, 196, .28); stroke-width: 1; } .il-ai .flow line { stroke: #9DB8EA; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 60; animation: flow 2.4s linear infinite; } .il-ai .flow line:nth-child(2n) { animation-delay: -.8s; } .il-ai .flow line:nth-child(3n) { animation-delay: -1.6s; } @keyframes flow { to { stroke-dashoffset: -65; } } .il-ai .nodes circle { fill: #141E3D; stroke: #D8D8D8; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: node 2.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes node { 50% { fill: #6F93CC; transform: scale(1.3); } } .il-ai .chip { fill: #1C3158; stroke: #E3E6EB; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(111, 147, 204, .8)); } .chip-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; display: grid; } .chip-icon .i { width: 22px; height: 22px; } /* ---------- Home service cards with illustrations ---------- */ .svc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .svc-card .card-body { position: relative; padding: 24px 26px 64px; flex: 1; } .card-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .svc-card .card-num { position: static; } .svc-card .card-icon { margin: 0; } .svc-card .card-go { bottom: 24px; } /* ---------- Platforms strip ---------- */ .platforms { padding-block: 0 clamp(50px, 7vw, 90px); } .plat-title { text-align: center; color: var(--silver); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; margin-bottom: 22px; } html[lang="ar"] .plat-title { letter-spacing: 0; font-size: 1rem; } .plat-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .plat-track { display: flex; width: max-content; gap: 14px; animation: marquee 46s linear infinite reverse; animation-play-state: paused; } [dir="rtl"] .plat-track { animation-name: marquee-rtl; } .plat-strip.play .plat-track { animation-play-state: running; } .plat-track .dup { display: contents; } .plat { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(36, 58, 102, .7), rgba(20, 30, 61, .7)); color: #E8EBF0; font-family: 'Questrial', sans-serif; } .plat .i { width: 22px; height: 22px; color: #fff; } .plat b { font-weight: 400; } /* ---------- Dashboard ---------- */ .measured { position: relative; overflow: hidden; } .measured-glow { position: absolute; width: 1000px; height: 700px; left: 50%; top: 18%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(62, 95, 148, .38), transparent); pointer-events: none; } .measured .wrap { position: relative; } .dash { position: relative; padding: 18px; border-radius: 26px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(30, 50, 92, .75), rgba(10, 18, 36, .92)); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .14); } .dash-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 6px 8px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .dash-title { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 1.05rem; } .dash-title .mark { width: 16px; height: auto; } .dash-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10, 18, 36, .7); border: 1px solid var(--line); } .dash-tabs b { font-weight: 400; font-size: .85rem; padding: 5px 13px; border-radius: 999px; color: var(--muted); } .dash-tabs b.on { background: var(--light); color: var(--bg); } .dash-chip { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--silver); padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line-strong); } .dash-chip .i { width: 15px; height: 15px; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "line line kpis" "bars cal post"; gap: 14px; } .panel { border-radius: 16px; padding: 16px; background: rgba(10, 18, 36, .58); border: 1px solid var(--line); } .panel h3 { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--silver); margin-bottom: 14px; font-weight: 400; letter-spacing: 0; } html[lang="ar"] .panel h3 { font-weight: 600; } .panel h3 .i { color: #fff; width: 18px; height: 18px; } .p-line { grid-area: line; } .lc { width: 100%; height: auto; display: block; overflow: visible; } .lc-grid line { stroke: rgba(186, 190, 196, .14); stroke-dasharray: 3 6; } .lc-prev { fill: none; stroke: rgba(186, 190, 196, .35); stroke-width: 1.5; stroke-dasharray: 4 6; } .lc-line { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .3s; filter: drop-shadow(0 0 6px rgba(157, 184, 234, .8)); } .in .lc-line { stroke-dashoffset: 0; } .lc-area { opacity: 0; transition: opacity 1.2s ease 1.3s; } .in .lc-area { opacity: 1; } .lc-dot { fill: var(--red); opacity: 0; transition: opacity .4s 2.3s; stroke: #fff; stroke-width: 2; } .in .lc-dot { opacity: 1; } .lc-x { display: flex; justify-content: space-between; font-size: .75rem; color: var(--slate); margin-top: 8px; direction: ltr; } [dir="rtl"] .lc-x { direction: rtl; flex-direction: row-reverse; } .p-kpis { grid-area: kpis; display: grid; gap: 10px; padding: 12px; } .kpi { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(36, 58, 102, .45); border: 1px solid var(--line); } .kpi-ic { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: rgba(111, 147, 204, .22); } .kpi-ic .i { width: 19px; height: 19px; } .kpi-l { color: #fff; font-size: .92rem; } .spark { grid-column: 2; width: 100%; max-width: 130px; height: 22px; } .spark path { fill: none; stroke: #9DB8EA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.6s var(--ease) .6s; } .in .spark path { stroke-dashoffset: 0; } .kpi-up { grid-row: 1 / 3; grid-column: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(216, 216, 216, .12); } .kpi-up .i { width: 16px; height: 16px; } [dir="rtl"] .kpi-up .i, [dir="rtl"] .spark { transform: scaleX(-1); } .p-bars { grid-area: bars; } .pbar { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .pbar-ic { color: #fff; display: grid; } .pbar-ic .i { width: 18px; height: 18px; } .pbar-track { flex: 1; height: 9px; border-radius: 5px; background: rgba(186, 190, 196, .12); overflow: hidden; } .pbar-fill { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #3E5F94, #D8D8D8); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: calc(var(--d) + .4s); } [dir="rtl"] .pbar-fill { transform-origin: right; background: linear-gradient(270deg, #3E5F94, #D8D8D8); } .in .pbar-fill { transform: scaleX(1); } .p-cal { grid-area: cal; } .cal-days, .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-days { margin-bottom: 5px; } .cal-days b { font-weight: 400; font-size: .7rem; color: var(--slate); text-align: center; } .cal i { position: relative; aspect-ratio: 1; border-radius: 6px; background: rgba(186, 190, 196, .09); } .cal i::after { content: ''; position: absolute; inset: 28%; border-radius: 50%; transform: scale(0); transition: transform .5s var(--ease); transition-delay: calc(var(--d, 0ms) + .3s); } .in .cal i::after { transform: scale(1); } .cal .c-p::after { background: #D8D8D8; } .cal .c-r::after { background: var(--red); } .cal .c-s::after { background: #6F93CC; } .cal-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .75rem; color: var(--silver); margin-top: 12px; } .cal-key span { display: inline-flex; align-items: center; gap: 6px; } .cal-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .cal-key .c-p { background: #D8D8D8; } .cal-key .c-r { background: var(--red); } .cal-key .c-s { background: #6F93CC; } .p-post { grid-area: post; } .mini-post { background: #15203f; border-radius: 12px; padding: 9px; border: 1px solid rgba(255, 255, 255, .07); } .mini-post .post-img { height: 108px; } .mini-post .post-img .mark { width: 26px; } .mini-post .post-act .i { width: 15px; height: 15px; } /* ---------- Why, steps, numbers ---------- */ .why-ic, .step-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px; color: #fff; background: linear-gradient(160deg, rgba(111, 147, 204, .35), rgba(111, 147, 204, .06)); border: 1px solid var(--line-strong); } .why-ic .i, .step-ic .i { width: 25px; height: 25px; } .why-item { padding: 26px 22px; border-radius: var(--radius); border: 1px solid var(--line); border-top-color: var(--line-strong); background: rgba(10, 18, 36, .45); } .why-item h3 { color: #fff; } .step { padding-top: 46px; } .step-ic { margin-bottom: 14px; } .step.on .step-ic { border-color: #fff; box-shadow: 0 0 30px -6px rgba(111, 147, 204, .8); } .stat { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(36, 58, 102, .6), rgba(10, 18, 36, .6)); border-color: var(--line-strong); } .ring { position: absolute; inset-inline-end: -26px; top: -26px; width: 150px; height: 150px; } .ring-bg { fill: none; stroke: rgba(186, 190, 196, .12); stroke-width: 7; } .ring-fg { fill: none; stroke: #D8D8D8; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1.8s var(--ease) .3s; } .stat.in .ring-fg { stroke-dashoffset: .22; } .stat-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px; color: #fff; background: rgba(111, 147, 204, .22); } .stat-ic .i { width: 23px; height: 23px; } .stat-label { color: #E3E6EB; } /* ---------- Clients / logo tiles ---------- */ .client, .logo-tile { gap: 12px; align-content: center; background: linear-gradient(165deg, rgba(36, 58, 102, .55), rgba(10, 18, 36, .6)); border-color: var(--line-strong); } .client-mono { width: 66px; height: 66px; border-radius: 19px; display: grid; place-items: center; font-family: 'Questrial', sans-serif; font-size: 1.35rem; letter-spacing: .06em; color: #0A1224; background: linear-gradient(160deg, #fff, #9aa1ad); box-shadow: 0 12px 30px -10px rgba(111, 147, 204, .7); filter: grayscale(1); transition: filter .35s, transform .35s var(--ease); } .client:hover .client-mono, .logo-tile:hover .client-mono { filter: none; transform: translateY(-3px) rotate(-4deg); } .client .client-name, .logo-tile .client-name { color: #E3E6EB; font-family: 'Questrial', sans-serif; font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .client .client-sv, .logo-tile .client-sv { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; opacity: 1; transform: none; } .chip { font-size: .76rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--light); background: rgba(10, 18, 36, .55); } .logo-tile { min-height: 300px; } /* ---------- CTA with floating service icons ---------- */ .cta-orbit { position: absolute; inset: 0; pointer-events: none; } .cta-chip { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: #fff; background: rgba(186, 190, 196, .1); border: 1px solid var(--line-strong); animation: float 5s ease-in-out infinite; animation-play-state: paused; } .cta-orbit.play .cta-chip { animation-play-state: running; } .cta-chip .i { width: 23px; height: 23px; } .cta-chip:nth-child(1) { top: 16%; inset-inline-start: 7%; } .cta-chip:nth-child(2) { top: 50%; inset-inline-start: 4%; animation-delay: -1s; } .cta-chip:nth-child(3) { bottom: 12%; inset-inline-start: 14%; animation-delay: -2s; } .cta-chip:nth-child(4) { top: 14%; inset-inline-end: 8%; animation-delay: -.5s; } .cta-chip:nth-child(5) { top: 50%; inset-inline-end: 4%; animation-delay: -1.5s; } .cta-chip:nth-child(6) { bottom: 12%; inset-inline-end: 14%; animation-delay: -2.5s; } /* ---------- Inner page hero ---------- */ .page-hero-grid-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(186, 190, 196, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 190, 196, .07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); } .ph-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .page-hero .lead { color: #D9DDE3; } /* About: platinum mark stage */ .mark-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; margin-inline: auto; } .mark-gl { position: absolute; inset: 0; width: 100%; height: 100%; } .ms-fallback { position: absolute; width: 34%; height: auto; left: 33%; top: 20%; filter: drop-shadow(0 24px 40px rgba(111, 147, 204, .5)); } .is-3d .ms-fallback { display: none; } .ms-rings i { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(186, 190, 196, .2); } .ms-rings i:nth-child(2) { inset: 18%; border-style: dashed; border-color: rgba(186, 190, 196, .3); animation: spin 40s linear infinite; animation-play-state: paused; } .ms-rings i:nth-child(3) { inset: -1%; border-color: rgba(111, 147, 204, .22); } .mark-stage.play .ms-rings i { animation-play-state: running; } @keyframes spin { to { transform: rotate(360deg); } } /* About: story + timeline */ .story-text .sec-head { margin-bottom: 8px; } .p-kpis { align-content: stretch; } .kpi { grid-template-rows: auto auto; align-content: center; } .story-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } .timeline { list-style: none; margin: 0; padding: 30px; position: relative; display: grid; gap: 30px; border-radius: 24px; border: 1px solid var(--line-strong); background: var(--card); position: sticky; top: calc(var(--header) + 30px); } .tl-line { position: absolute; inset-inline-start: 57px; top: 60px; bottom: 60px; width: 2px; background: var(--line); } .tl-line .steps-fill { position: absolute; inset: 0; transform: scaleY(var(--fill, 0)); transform-origin: top; background: linear-gradient(180deg, #fff, var(--sky)); } .tl-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; } .tl-ic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #0d1630; border: 2px solid var(--line-strong); transition: border-color .4s, box-shadow .4s; } .tl-ic .i { width: 24px; height: 24px; } .tl-ic .mark { width: 20px; height: auto; } .tl-item.on .tl-ic { border-color: #fff; box-shadow: 0 0 0 6px rgba(216, 216, 216, .1), 0 0 30px rgba(111, 147, 204, .6); } .tl-item h3 { font-size: 1.2rem; margin: 12px 0 6px; color: #fff; } .tl-item p { color: var(--muted); font-size: .98rem; } /* About: people + AI diagram */ .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .duo-diagram { --o: 170px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; padding: 40px 18px; min-height: 380px; border-radius: 26px; border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 50%, rgba(62, 95, 148, .45), transparent 65%), rgba(10, 18, 36, .5); } .orbit { position: relative; width: var(--o); height: var(--o); border-radius: 50%; display: grid; place-items: center; } .orbit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(186, 190, 196, .45); animation: spin 30s linear infinite; animation-play-state: paused; } .duo-diagram.play .orbit::before, .duo-diagram.play .flow-lines i { animation-play-state: running; } .orb-core { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; } .orb-core .i { width: 32px; height: 32px; color: #fff; } .orb-core b { font-weight: 400; font-size: .85rem; color: #fff; max-width: 92px; line-height: 1.3; } html[lang="ar"] .orb-core b { font-weight: 700; } .orb-item { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #141E3D; border: 1px solid var(--line-strong); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); transform: rotate(calc(var(--a) + 45deg)) translateY(calc(var(--o) / -2)) rotate(calc((var(--a) + 45deg) * -1)); } .orb-item .i { width: 19px; height: 19px; } .orb-item b { position: absolute; top: 100%; margin-top: 4px; font-weight: 400; font-size: .7rem; color: var(--silver); white-space: nowrap; } .flow-lines { display: grid; gap: 26px; min-width: 24px; } .flow-lines i { display: block; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #9DB8EA, transparent); background-size: 200% 100%; animation: flowx 2s linear infinite; animation-play-state: paused; } .duo-diagram > .flow-lines:nth-child(4) i, [dir="rtl"] .duo-diagram > .flow-lines:nth-child(2) i { animation-direction: reverse; } [dir="rtl"] .duo-diagram > .flow-lines:nth-child(4) i { animation-direction: normal; } @keyframes flowx { from { background-position: 100% 0; } to { background-position: -100% 0; } } .orb-center { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 18px 16px; border-radius: 22px; background: linear-gradient(160deg, #2a4170, #0D1630); border: 1px solid #D8D8D8; box-shadow: 0 0 60px rgba(111, 147, 204, .5); } .orb-center .mark { width: 44px; height: auto; } .orb-center b { font-weight: 400; color: #fff; font-size: .9rem; white-space: nowrap; } html[lang="ar"] .orb-center b { font-weight: 700; } .mv-ic { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 19px; margin-bottom: 22px; color: #fff; background: linear-gradient(160deg, rgba(111, 147, 204, .4), rgba(111, 147, 204, .06)); border: 1px solid var(--line-strong); box-shadow: 0 14px 30px -14px rgba(111, 147, 204, .9); } .mv-ic .i { width: 31px; height: 31px; } .mv-card { display: block; } .mv-label { display: table; } .value { background: linear-gradient(165deg, rgba(36, 58, 102, .6), rgba(13, 21, 44, .7)); border-color: var(--line-strong); } .value-icon { width: 58px; height: 58px; border-radius: 17px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(111, 147, 204, .35), rgba(111, 147, 204, .05)); color: #fff; } .value-icon .i { width: 27px; height: 27px; } .value h3 { color: #fff; } /* Services page */ .chip-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .hero-chip { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--card); color: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); animation: float 6s ease-in-out infinite; transition: border-color .25s; } .hero-chip:hover { border-color: #fff; } .hero-chip:nth-child(2n) { animation-delay: -2s; } .hero-chip:nth-child(3n) { animation-delay: -4s; } .hero-chip .i { width: 24px; height: 24px; } .svc { grid-template-columns: 100px 1fr 300px; align-items: start; } .svc .checks { grid-template-columns: 1fr; } @media (max-width: 1100px) and (min-width: 601px) { .svc .checks { grid-template-columns: 1fr 1fr; } } .svc-visual .illus { height: 100%; min-height: 250px; border-radius: 18px; border: 1px solid var(--line-strong); } .svc-icon { color: #fff; background: linear-gradient(160deg, rgba(111, 147, 204, .35), rgba(111, 147, 204, .05)); } .svc-tag { color: #9DB8EA; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "line line" "kpis bars" "cal post"; } .svc { grid-template-columns: 90px 1fr; } .svc-visual { grid-column: 1 / -1; } .svc-visual .illus { min-height: 220px; } .diff-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .ph-grid { grid-template-columns: 1fr; gap: 20px; } .mark-stage { max-width: 300px; } .story-grid { grid-template-columns: 1fr; } .timeline { position: relative; top: 0; } .cta-orbit { display: none; } .services-hero .ph-visual { order: 2; } } @media (max-width: 600px) { .dash { padding: 12px; border-radius: 20px; } .dash-grid { grid-template-columns: 1fr; grid-template-areas: "line" "kpis" "bars" "cal" "post"; } .dash-chip { margin-inline-start: 0; } .grid-2 { grid-template-columns: 1fr; } .duo-diagram { --o: 150px; grid-template-columns: 1fr; justify-items: center; gap: 30px; padding: 46px 12px; } .flow-lines { grid-auto-flow: column; gap: 26px; min-width: 0; height: 30px; } .flow-lines i { width: 2px; height: 30px; background: linear-gradient(180deg, transparent, #9DB8EA, transparent); background-size: 100% 200%; animation-name: flowy; } @keyframes flowy { from { background-position: 0 100%; } to { background-position: 0 -100%; } } .stat { display: block; } .stat-num { font-size: 3.2rem; margin-bottom: 8px; } .svc { grid-template-columns: 1fr; } .svc-visual { order: -1; } .illus { height: 190px; } .timeline { padding: 22px; } .tl-line { inset-inline-start: 49px; } .plat { padding: 10px 16px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .illus *, .plat-track, .cta-chip, .hero-chip, .orbit::before, .flow-lines i, .ms-rings i { animation: none !important; } .plat-track { flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; } .plat-track .dup { display: none; } .lc-line, .spark path { stroke-dashoffset: 0; } .lc-area, .lc-dot { opacity: 1; } .pbar-fill, .cal i::after { transform: none; } .ring-fg { stroke-dashoffset: .22; } } /* ---------- Mobile menu (full screen, outside the header) ---------- */ .mnav { position: fixed; inset: 0; z-index: 250; } .mnav[hidden] { display: none; } @media (min-width: 1001px) { .mnav { display: none !important; } } .mnav-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 70% at 100% 0%, rgba(62, 95, 148, .55), transparent 60%), radial-gradient(80% 50% at 0% 100%, rgba(237, 28, 36, .08), transparent 70%), linear-gradient(180deg, #0d1733, #0A1224 60%); clip-path: circle(0 at calc(100% - 44px) 36px); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); } [dir="rtl"] .mnav-bg { clip-path: circle(0 at 44px 36px); } .mnav.open .mnav-bg { clip-path: circle(160% at calc(100% - 44px) 36px); } [dir="rtl"] .mnav.open .mnav-bg { clip-path: circle(160% at 44px 36px); } .mnav-mark { position: absolute; width: 70%; height: auto; inset-inline-end: -18%; bottom: -8%; opacity: .07; } .mnav-in { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 22px; padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) calc(env(safe-area-inset-bottom) + 24px); opacity: 0; transition: opacity .3s ease; } .mnav.open .mnav-in { opacity: 1; transition-delay: .12s; } .mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; } .mnav-close { position: relative; width: 48px; height: 48px; border-radius: 15px; cursor: pointer; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(186, 190, 196, .2), rgba(20, 30, 61, .6)); } .mnav-close i { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: #fff; transform: rotate(45deg); transition: transform .45s var(--ease) .15s; } .mnav-close i + i { transform: rotate(-45deg); } .mnav:not(.open) .mnav-close i { transform: rotate(0); } .mnav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .mnav-link { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 14px; min-height: 70px; padding: 11px 14px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(165deg, rgba(36, 58, 102, .55), rgba(13, 21, 44, .6)); opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .55s var(--ease), border-color .25s, background-color .25s; } .mnav.open .mnav-link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 55ms + 160ms); } .mnav-link:active { transform: scale(.98); } .mnav-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, rgba(111, 147, 204, .4), rgba(111, 147, 204, .06)); border: 1px solid var(--line-strong); } .mnav-ic .i { width: 22px; height: 22px; } .mnav-txt { display: grid; gap: 1px; min-width: 0; } .mnav-txt b { font-weight: var(--display-weight); font-size: 1.28rem; line-height: 1.25; color: #fff; } .mnav-txt small { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mnav-num { font-family: 'Questrial', sans-serif; font-size: .74rem; letter-spacing: .14em; color: var(--slate); display: inline-flex; align-items: center; gap: 7px; } .mnav-go { color: var(--silver); display: grid; } .mnav-link[aria-current="page"] { border-color: rgba(230, 234, 240, .6); background: linear-gradient(165deg, rgba(62, 95, 148, .6), rgba(20, 30, 61, .7)); } .mnav-link[aria-current="page"] .mnav-num::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(237, 28, 36, .2); } .mnav-actions { display: grid; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity .45s ease .45s, transform .55s var(--ease) .45s; } .mnav.open .mnav-actions { opacity: 1; transform: none; } .mnav-quote { width: 100%; min-height: 56px; font-size: 1.05rem; } .mnav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mnav-row .btn { min-height: 52px; } .mnav-foot { margin-top: auto; display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); opacity: 0; transition: opacity .5s ease .55s; } .mnav.open .mnav-foot { opacity: 1; } .mnav-foot .socials { gap: 10px; } .mnav-lang { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(10, 18, 36, .6); } .mnav-lang-opt { min-width: 64px; padding: 8px 16px; border-radius: 999px; text-align: center; color: var(--silver); font-size: .95rem; } .mnav-lang-opt[lang="ar"] { font-family: 'Cairo', sans-serif; } .mnav-lang-opt[lang="en"] { font-family: 'Questrial', sans-serif; letter-spacing: .08em; } .mnav-lang-opt.on { background: var(--light); color: var(--bg); } .mnav-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .9rem; } .mnav-meta .i { color: var(--silver); } .menu-locked body { position: fixed; inset-inline: 0; width: 100%; top: var(--lock-y, 0); overflow: hidden; } @media (max-height: 640px) { .mnav-link { min-height: 58px; padding-block: 7px; } .mnav-txt small { display: none; } } @media (prefers-reduced-motion: reduce) { .mnav-bg, .mnav.open .mnav-bg, [dir="rtl"] .mnav.open .mnav-bg { clip-path: none; } } /* ---------- 3D cube loading state (no flat-cube flash) ---------- */ .gl-pending .cube-tilt, .gl-pending .cube-floor { visibility: hidden; } .cube-loader { display: none; } .gl-pending .cube-loader { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .7s ease; } .gl-pending.has-3d .cube-loader { opacity: 0; } .cube-loader img { position: relative; width: 26%; height: auto; filter: drop-shadow(0 0 24px rgba(157, 184, 234, .65)); animation: cl-pulse 1.8s ease-in-out infinite; } .cl-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(216, 216, 216, .18); border-top-color: rgba(255, 255, 255, .85); animation: spin 1.4s linear infinite; } .cl-ring-2 { inset: 4%; border-color: rgba(111, 147, 204, .12); border-bottom-color: rgba(157, 184, 234, .6); animation-duration: 2.6s; animation-direction: reverse; } .cube-loader::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 147, 204, .3), transparent); } @keyframes cl-pulse { 50% { transform: scale(.92); opacity: .7; } } .hero-gl { opacity: 0; transition: opacity .9s ease; } .hero-gl.ready { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cube-loader img, .cl-ring { animation: none !important; } .hero-gl { transition: none; } } /* ---------- Services band: thin, refined, spotlight on the centre item ---------- */ .band { position: relative; padding-block: clamp(34px, 5vw, 64px); } .band-in { position: relative; overflow: hidden; direction: ltr; padding-block: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .band-in::before, .band-in::after { content: ''; position: absolute; inset-inline: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(220, 226, 236, .55) 30%, rgba(255, 255, 255, .9) 50%, rgba(220, 226, 236, .55) 70%, transparent); } .band-in::before { top: 0; } .band-in::after { bottom: 0; } .band-track { display: flex; align-items: center; width: max-content; gap: clamp(26px, 3.4vw, 54px); padding-inline-end: clamp(26px, 3.4vw, 54px); will-change: transform; } .band-item { --f: .4; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-family: 'Questrial', sans-serif; font-size: clamp(.9rem, 1.15vw, 1.08rem); letter-spacing: .28em; text-transform: uppercase; color: rgb(calc(150 + 105 * var(--f)), calc(156 + 99 * var(--f)), calc(166 + 89 * var(--f))); opacity: calc(.38 + .62 * var(--f)); text-shadow: 0 0 calc(18px * var(--f)) rgba(157, 184, 234, calc(.7 * var(--f))); } html[lang="ar"] .band-item { font-family: 'Cairo', sans-serif; letter-spacing: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; } .band-item b { font-weight: inherit; } .band-item .i { width: 18px; height: 18px; color: currentColor; } .band-dia { width: 6px; height: 6px; flex: none; transform: rotate(45deg); background: linear-gradient(135deg, #fff, #8F96A1); box-shadow: 0 0 10px rgba(157, 184, 234, .6); } .band-shine { position: absolute; top: 0; bottom: 0; width: 22%; left: -25%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09) 45%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .09) 55%, transparent); animation: band-shine 7s ease-in-out infinite; } @keyframes band-shine { 0%, 55% { left: -25%; } 100% { left: 110%; } } @media (prefers-reduced-motion: reduce) { .band-shine { display: none; } .band-track { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 14px; padding-inline: 16px; } .band-track > :nth-child(n + 13) { display: none; } .band-item { --f: 1; } } /* ---------- Client logo cards: aligned plates, grey-to-colour wipe, shine ---------- */ .client.brand-card, .logo-tile.brand-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; text-align: start; padding: 0; min-height: 0; overflow: hidden; border-radius: 22px; transition: transform .5s var(--ease), border-color .35s, box-shadow .35s, opacity .8s var(--ease); } .brand-card:hover { transform: translateY(-6px); border-color: rgba(230, 234, 240, .55); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95), 0 0 50px -16px rgba(111, 147, 204, .55); } .bc-plate { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .6); background: radial-gradient(120% 90% at 30% 0%, #FFFFFF, #EEF0F4 55%, #DADEE5); box-shadow: inset 0 -20px 40px -30px rgba(10, 18, 36, .35); } .bc-logo { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); transform: translate(-50%, -50%); } .bc-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .bc-grey { filter: grayscale(1) contrast(1.1); opacity: .62; } .bc-color { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); } .brand-card:hover .bc-color, .brand-card:focus-visible .bc-color, .brand-card.colored .bc-color { clip-path: inset(0 0 0 0); } .bc-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-120%); } .brand-card:hover .bc-shine, .brand-card.colored .bc-shine { transform: translateX(120%); transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); } .bc-body { display: grid; gap: 14px; padding: 22px 24px 26px; } .brand-card .client-name { color: #fff; font-family: 'Questrial', sans-serif; font-size: clamp(1.2rem, 1.7vw, 1.4rem); letter-spacing: .01em; } .brand-card .client-sv { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px; opacity: 1; transform: none; } .brand-card .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; } .brand-card .chip .i { width: 14px; height: 14px; color: #9DB8EA; } .logo-grid .bc-plate { aspect-ratio: 16 / 11; } @media (prefers-reduced-motion: reduce) { .bc-color { clip-path: none; } .bc-shine { display: none; } } /* Clients with a project page: how many pictures and videos, and a "View project" bar that rises on hover */ .bc-count { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; display: flex; gap: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 18, 36, .78); color: #fff; font-size: .78rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .bc-count span { display: inline-flex; align-items: center; gap: 5px; } .bc-count .i { width: 14px; height: 14px; } .bc-cta { position: absolute; inset-inline: 14px; inset-block-end: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--bg); color: #fff; font-size: .9rem; box-shadow: 0 14px 30px -14px rgba(10, 18, 36, .8); opacity: 0; transform: translateY(130%); transition: transform .5s var(--ease), opacity .35s; } .bc-cta .i { width: 18px; height: 18px; color: var(--red); transition: transform .35s var(--ease); } [dir="rtl"] .bc-cta .i-arrow { transform: scaleX(-1); } .has-project .bc-logo { transition: translate .5s var(--ease); } .has-project:hover .bc-logo, .has-project:focus-visible .bc-logo { translate: 0 -14%; } .has-project:hover .bc-cta, .has-project:focus-visible .bc-cta { opacity: 1; transform: none; } .has-project:hover .bc-cta .i-arrow { transform: translateX(4px); } [dir="rtl"] .has-project:hover .bc-cta .i-arrow { transform: scaleX(-1) translateX(4px); } @media (hover: none) { .bc-cta { opacity: 1; transform: none; } .has-project .bc-logo { translate: 0 -14%; } } /* ---------- Project page: logo, what we did, gallery ---------- */ .proj-back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .proj-back:hover { color: #fff; } .proj-back .i { width: 16px; height: 16px; transform: scaleX(-1); } [dir="rtl"] .proj-back .i { transform: none; } .proj-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; } .proj-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; } .proj-chips .chip .i { width: 14px; height: 14px; color: #9DB8EA; } .proj-plate { width: 100%; aspect-ratio: 16 / 11; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(111, 147, 204, .5); } .proj-work { padding-top: 0; } .gallery { columns: 3 300px; column-gap: 18px; } .g-item { break-inside: avoid; margin: 0 0 18px; } .g-open { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .35s, box-shadow .35s; } .g-open:hover, .g-open:focus-visible { border-color: var(--line-strong); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), 0 0 40px -18px rgba(111, 147, 204, .55); } .g-open img, .g-open video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .g-open:hover img { transform: scale(1.04); } .g-video .g-open { cursor: pointer; } .g-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; z-index: 2; border-radius: 50%; background: rgba(10, 18, 36, .62); border: 1px solid rgba(255, 255, 255, .45); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .35s var(--ease), opacity .35s; } .g-play .i { width: 24px; height: 24px; margin-inline-start: 3px; fill: currentColor; } .g-play .i-expand { width: 22px; height: 22px; margin: 0; fill: none; } /* a Drive file or Canva design without a cover picture: its own small live view, drawn at double size and scaled down so its buttons stay small; clicks pass through to the tile, which opens it full screen */ .g-live { position: absolute; inset: 0; overflow: hidden; background: var(--surface); } .g-live iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; } [dir="rtl"] .g-live iframe { left: auto; right: 0; transform-origin: 100% 0; } .g-open.playing .g-play { opacity: 0; transform: scale(.7); } .g-item figcaption { padding: 10px 4px 0; color: var(--muted); font-size: .9rem; } .pn-link { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); transition: transform .5s var(--ease), border-color .35s; } .pn-link:hover { transform: translateY(-4px); border-color: var(--line-strong); } .pn-logo { flex: none; width: 110px; height: 72px; padding: 10px 14px; border-radius: 14px; background: radial-gradient(120% 90% at 30% 0%, #FFFFFF, #E4E7EC); } .pn-logo img { width: 100%; height: 100%; object-fit: contain; } .pn-text { display: grid; gap: 4px; } .pn-label { color: var(--muted); font-size: .85rem; } .pn-name { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .pn-go { margin-inline-start: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); } .pn-go .i { width: 20px; height: 20px; } @media (max-width: 600px) { .gallery { columns: 1; } .pn-logo { width: 84px; height: 56px; } .pn-go { width: 42px; height: 42px; } } /* Full-screen viewer for the gallery */ .lb { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 9, 20, .95); color: #fff; } .lb::backdrop { background: transparent; } .lb-stage { position: absolute; inset: 70px 84px 76px; display: grid; place-items: center; } .lb-stage img, .lb-stage video { max-width: calc(100vw - 168px); max-height: calc(100dvh - 146px); border-radius: 12px; background: #000; box-shadow: 0 40px 90px -30px #000; } .lb-stage iframe { width: min(calc(100vw - 168px), calc((100dvh - 146px) * var(--r, 1.7778))); aspect-ratio: var(--r, 16 / 9); border: 0; border-radius: 12px; background: #000; } .lb-btn { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255, 255, 255, .35); background: rgba(20, 30, 61, .7); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lb-btn:hover { background: rgba(62, 95, 148, .8); } .lb-btn svg { width: 22px; height: 22px; } .lb-close { inset-block-start: 14px; inset-inline-end: 16px; } .lb-prev, .lb-next { top: 50%; margin-top: -25px; } .lb-prev { inset-inline-start: 18px; } .lb-next { inset-inline-end: 18px; } [dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg { transform: scaleX(-1); } .lb-n { position: absolute; inset-block-start: 26px; inset-inline-start: 24px; color: var(--muted); font-size: .9rem; } .lb-cap { position: absolute; inset-inline: 84px; inset-block-end: 24px; text-align: center; color: var(--light); } @media (max-width: 700px) { .lb-stage { inset: 64px 10px 110px; } .lb-stage img, .lb-stage video { max-width: calc(100vw - 20px); max-height: calc(100dvh - 174px); } .lb-stage iframe { width: min(calc(100vw - 20px), calc((100dvh - 174px) * var(--r, 1.7778))); } .lb-prev, .lb-next { top: auto; margin: 0; inset-block-end: 22px; } .lb-cap { inset-inline: 80px; inset-block-end: 34px; font-size: .88rem; } } /* The Platino Cube logo never flips: icon left, lettering right, in every language */ .logo { direction: ltr; } [dir="rtl"] .foot-tag { text-align: right; } .foot-tag[lang="en"], .end-sub[lang="en"] { font-family: 'Questrial', 'Century Gothic', sans-serif; letter-spacing: .01em; } @media (max-width: 600px) { .brand-card .bc-plate, .logo-grid .bc-plate { aspect-ratio: 16 / 8.5; } } /* ---------- Arabic fixes: icon on the right of the word; charts read the same way in both languages ---------- */ html[lang="ar"] .band-item { flex-direction: row-reverse; } [dir="rtl"] .kpi-up .i, [dir="rtl"] .spark { transform: none; } /* ---------- Interactive monthly report ---------- */ .dash { --mx: 50%; --my: 0%; } .dash::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(111, 147, 204, .16), transparent 60%); } .dash:hover::before { opacity: 1; } .dash-tabs { position: relative; } .dash-tabs button { position: relative; z-index: 1; font: inherit; font-size: .85rem; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color .3s; } .dash-tabs button:hover { color: #fff; } .dash-tabs button.on { color: var(--bg); } .dash-tabs b { display: none; } .tab-pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--light); box-shadow: 0 6px 18px -6px rgba(216, 216, 216, .6); transition: transform .5s var(--ease), width .5s var(--ease); } .lc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; } .lc-head h3 { margin: 0; } .lc-legend { display: inline-flex; gap: 14px; font-size: .75rem; color: var(--slate); } .lc-legend span { display: inline-flex; align-items: center; gap: 6px; } .lg-now { width: 16px; height: 2.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(157, 184, 234, .9); } .lg-prev { width: 16px; height: 0; border-top: 2px dashed rgba(186, 190, 196, .6); } .lc-wrap { position: relative; cursor: crosshair; touch-action: pan-y; } .lc-guide { stroke: rgba(255, 255, 255, .4); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; } .lc-hover { fill: #fff; stroke: #6F93CC; stroke-width: 3; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 6px rgba(157, 184, 234, .9)); } .lc-wrap.hovering .lc-guide, .lc-wrap.hovering .lc-hover { opacity: 1; } .lc-tip { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 2px; min-width: 150px; padding: 9px 12px; border-radius: 12px; pointer-events: none; background: rgba(10, 18, 36, .92); border: 1px solid var(--line-strong); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8rem; color: var(--muted); opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .2s; } .lc-tip b { color: #fff; font-weight: 400; font-size: .85rem; } html[lang="ar"] .lc-tip b { font-weight: 700; } .lc-tip span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: #9DB8EA; } .lc-wrap.hovering .lc-tip { opacity: 1; } .dash-hint { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: .78rem; color: var(--slate); transition: opacity .5s; } .dash-hint .i { width: 14px; height: 14px; color: #9DB8EA; animation: blink 2.4s ease-in-out infinite; } .dash.used .dash-hint { opacity: 0; } button.kpi { width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color .3s, background-color .3s, transform .3s var(--ease), box-shadow .3s; } button.kpi:hover { transform: translateY(-2px); border-color: var(--line-strong); } button.kpi.on { border-color: rgba(230, 234, 240, .65); background: rgba(62, 95, 148, .45); box-shadow: 0 0 30px -10px rgba(111, 147, 204, .7); } button.kpi.on .kpi-ic { background: var(--light); color: var(--bg); } .pbar { position: relative; } .pbar-fill { transition: transform 1.4s var(--ease), width .9s var(--ease); } .pbar-name { position: absolute; inset-inline-end: 0; top: -15px; font-size: .68rem; color: var(--silver); opacity: 0; transition: opacity .25s; font-family: 'Questrial', sans-serif; } .pbar:hover .pbar-name { opacity: 1; } .pbar:hover .pbar-fill { filter: brightness(1.25); } .cal i { transition: transform .25s var(--ease); } .cal i[data-type]:hover { transform: scale(1.12); } .cal i::after { transition: transform .5s var(--ease), opacity .3s; } .cal.f-p i:not(.c-p)::after, .cal.f-r i:not(.c-r)::after, .cal.f-s i:not(.c-s)::after { opacity: .12; } .cal-key button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--silver); font: inherit; font-size: .75rem; cursor: pointer; transition: border-color .25s, color .25s; } .cal-key button:hover, .cal-key button.on { border-color: var(--line-strong); color: #fff; } .p-post .post-img { position: relative; overflow: hidden; } .like { display: grid; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .like .i { width: 18px; height: 18px; transition: transform .3s var(--ease); } .like:hover .i { transform: scale(1.15); } .like.liked .i { color: var(--red); } .like.liked .i .duo { opacity: 1; color: var(--red); } .burst { position: absolute; left: 50%; top: 50%; color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(.3); pointer-events: none; } .burst .i { width: 54px; height: 54px; filter: drop-shadow(0 6px 18px rgba(237, 28, 36, .6)); } .burst .i .duo { opacity: .95; color: #fff; } .burst.pop { animation: burst .9s var(--ease); } @keyframes burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(.95); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } } @media (prefers-reduced-motion: reduce) { .tab-pill, .dash-hint .i { transition: none; animation: none; } .burst.pop { animation: none; } } /* ---------- Pre-launch fixes ---------- */ /* the form must disappear after sending (display:grid was beating the hidden attribute) */ .form[hidden] { display: none; } .form-note { flex-basis: 100%; font-size: .82rem; color: var(--slate); } .form-note a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } /* nothing smaller than 12px */ .cube-index li span, .pbar-name, .cal-days b, .card-num, .face-num { font-size: max(12px, .75rem); } .cal-key button, .dash-tabs button { min-height: 36px; } /* comfortable tap targets */ .like { width: 40px; height: 40px; place-items: center; margin: -11px -6px -11px -11px; } [dir="rtl"] .like { margin: -11px -11px -11px -6px; } .cal-key button { min-height: 40px; padding: 6px 12px; } .nf .link, .nf-ar .link { min-height: 44px; } @media (max-width: 860px) { .js .hero { height: 300vh; } .dash-tabs button { min-height: 40px; padding: 8px 14px; } } .svc-index a span { font-size: max(12px, .72rem); } /* ---------- Quote form v2: icon fields, country picker, service chips ---------- */ .field .fx-box { position: relative; display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 0 15px; border-radius: 15px; background: linear-gradient(180deg, rgba(10, 18, 36, .78), rgba(16, 26, 54, .78)); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .25s, box-shadow .25s, background-color .25s; } .field .fx-box > .i { width: 19px; height: 19px; flex: none; color: var(--slate); transition: color .25s; } .field .fx-box input, .field .fx-box textarea, .field .fx-box input:focus, .field .fx-box textarea:focus { flex: 1; min-width: 0; min-height: 0; padding: 15px 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: var(--text); } .field .fx-box ::placeholder { color: rgba(170, 176, 186, .5); } .field .fx-box:hover { border-color: rgba(220, 226, 236, .55); } .field .fx-box:focus-within { border-color: var(--sky); background: linear-gradient(180deg, rgba(16, 28, 58, .9), rgba(20, 34, 68, .9)); box-shadow: 0 0 0 4px rgba(111, 147, 204, .16), 0 12px 30px -16px rgba(111, 147, 204, .7); } .field .fx-box:focus-within > .i { color: #fff; } .field.invalid .fx-box { border-color: var(--red); box-shadow: 0 0 0 4px rgba(237, 28, 36, .14); } .field.invalid .fx-box > .i { color: #ff8a8f; } .fx-area { align-items: flex-start; } .field .fx-area textarea { padding: 15px 0 30px; min-height: 130px; resize: vertical; } .fx-count { position: absolute; inset-inline-end: 15px; bottom: 9px; font-size: .75rem; color: var(--slate); font-family: 'Questrial', sans-serif; direction: ltr; } /* phone with country code */ .fx-phone-field { position: relative; } .field .fx-phone { padding-left: 7px; gap: 10px; } .cc-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; flex: none; cursor: pointer; border-radius: 11px; border: 1px solid var(--line); background: rgba(36, 58, 102, .55); color: #fff; font: inherit; font-family: 'Questrial', sans-serif; transition: border-color .2s, background-color .2s; } .cc-btn:hover, .cc-btn[aria-expanded="true"] { border-color: var(--silver); background: rgba(62, 95, 148, .55); } .cc-btn b { font-weight: 400; font-size: .74rem; letter-spacing: .1em; color: var(--silver); } .cc-btn span { font-size: 1rem; } .cc-chev { width: 14px; height: 14px; color: var(--silver); transition: transform .25s var(--ease); } .cc-btn[aria-expanded="true"] .cc-chev { transform: rotate(180deg); } .cc-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 272px; overflow: auto; margin: 0; padding: 6px; list-style: none; border-radius: 15px; background: rgba(14, 22, 46, .98); border: 1px solid var(--line-strong); box-shadow: 0 26px 54px -20px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fade-up .25s var(--ease); } .cc-list[hidden] { display: none; } .cc-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; color: var(--light); } .cc-list li b { font-weight: 400; font-family: 'Questrial', sans-serif; font-size: .75rem; letter-spacing: .08em; color: var(--slate); } .cc-list li i { font-style: normal; font-family: 'Questrial', sans-serif; color: var(--silver); direction: ltr; } .cc-list li:hover, .cc-list li:focus { background: rgba(62, 95, 148, .45); outline: none; } .cc-list li[aria-selected="true"] { background: rgba(216, 216, 216, .12); color: #fff; } .cc-list li[aria-selected="true"] i { color: #fff; } /* service chips */ .svc-pick-field { border: 0; margin: 0; padding: 0; min-width: 0; } .svc-pick-field legend { padding: 0; margin-bottom: 9px; font-size: .92rem; color: var(--silver); } .svc-pick { display: flex; flex-wrap: wrap; gap: 9px; } .svc-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; cursor: pointer; user-select: none; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(10, 18, 36, .55); color: var(--light); font-size: .95rem; transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; } .svc-chip input { position: absolute; opacity: 0; pointer-events: none; } .svc-chip .i { width: 17px; height: 17px; color: #9DB8EA; transition: color .2s; } .svc-chip:hover { border-color: var(--silver); transform: translateY(-1px); } .svc-chip.on { background: var(--light); border-color: #fff; color: var(--bg); box-shadow: 0 10px 26px -12px rgba(216, 216, 216, .7); } .svc-chip.on .i { color: var(--bg); } .svc-chip.focus { outline: 2px solid var(--sky); outline-offset: 2px; } @media (max-width: 600px) { .svc-chip { flex: 1 1 auto; justify-content: center; } } /* Contact card: hours on two aligned lines */ .details .hours-dd { display: grid; gap: 2px; } .details .hours-dd span { white-space: nowrap; } .details .hours-time { color: var(--muted); font-size: .95em; font-variant-numeric: tabular-nums; } /* ---------- Hero without scroll-lock: one screen, self-turning cube ---------- */ .js .hero { height: auto; } .js .hero-pin { position: relative; height: auto; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--header) + 24px) 96px; } .hero-copy { opacity: 1 !important; transform: none !important; } .cube-scene { cursor: grab; touch-action: pan-y; user-select: none; } .cube-scene:active { cursor: grabbing; } .cube-index li { display: contents; } .cube-index button { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; font: inherit; color: rgba(160, 165, 173, .7); cursor: pointer; transition: color .3s, background-color .3s; } .cube-index button:hover { color: #fff; background: rgba(216, 216, 216, .07); } .cube-index li.on button { color: #fff; } .cube-index li.on button span { color: var(--red); } .cube-index button span { font-size: max(12px, .72rem); letter-spacing: .1em; } .scroll-hint { border: 0; background: none; cursor: pointer; color: var(--silver); font: inherit; font-size: .72rem; padding: 8px 14px; border-radius: 14px; opacity: 1 !important; transition: color .25s; } .scroll-hint:hover { color: #fff; } .scroll-hint i.sh-mouse { position: relative; display: block; width: 22px; height: 34px; border: 1.6px solid currentColor; border-radius: 12px; background: none; animation: none; transform: none; } .scroll-hint i.sh-mouse b { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: wheel 1.8s ease-in-out infinite; } @keyframes wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } } @media (max-width: 860px) { .js .hero { height: auto; } .js .scroll-hint { display: flex; bottom: 14px; } .cube-index { display: flex; gap: 4px 10px; max-width: 360px; font-size: .8rem; } .js .hero-pin { padding-bottom: 80px; } } @media (prefers-reduced-motion: reduce) { .scroll-hint i.sh-mouse b { animation: none; } } @media (max-width: 860px) { .js .scroll-hint { display: none; } } /* Hero without buttons; more room above the cube on phones */ .hero-copy .trust { margin-top: 26px; } @media (max-width: 860px) { .cube-zone { margin-top: 56px; } } @media (max-width: 860px) { .cube-zone { margin-top: calc(var(--s) * .42 + 40px); gap: calc(var(--s) * .34 + 26px); } .js .hero-pin { padding-bottom: 64px; } } /* ---------- Home hero: high-res animated background video (replaces the old image) ---------- */ .hero-bg { background-image: url(../img/hero-poster.webp); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0; pointer-events: none; } /* the hero background is mirrored in Arabic; un-mirror the video so the logo watermark never reads backwards */ [dir="rtl"] .hero-video { transform: scaleX(-1); } @media (max-width: 860px) { .hero-bg { background-image: url(../img/hero-poster-m.webp); } .hero-video { object-position: 78% 0; } } @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } } /* Intro glow: fully inside its section, no hard cut at the bottom */ .intro-glow { left: 50%; top: 50%; width: min(1000px, 90vw); height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(62, 95, 148, .22), rgba(62, 95, 148, .08) 55%, transparent); } /* Cube -> logo on scroll: "Your brand." appears where the service names were */ .cube-zone { position: relative; } .cube-brand { position: absolute; left: 50%; bottom: -6px; margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); } .cube-brand b { font-weight: var(--display-weight); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; background: linear-gradient(180deg, #fff 35%, #9BA1AB); -webkit-background-clip: text; background-clip: text; color: transparent; } .cube-brand span { font-family: 'Questrial', sans-serif; font-size: .9rem; color: var(--silver); letter-spacing: .02em; } @media (prefers-reduced-motion: reduce) { .cube-brand { display: none; } } .cube-brand { bottom: auto; top: calc(var(--s) + 34px); } /* ---------- 'Your brand' section: the cube flies down and becomes the logo here ---------- */ .hero-gl.hero-gl-fixed { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; } .brand-reveal { position: relative; min-height: 86vh; min-height: 86svh; display: grid; place-items: center; padding-block: 90px; overflow: hidden; } .br-glow { position: absolute; left: 50%; top: 50%; width: min(900px, 95vw); height: 80%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(111, 147, 204, .2), rgba(62, 95, 148, .07) 55%, transparent); } .br-in { position: relative; display: grid; justify-items: center; text-align: center; } .br-slot { height: clamp(220px, 34vh, 340px); aspect-ratio: 1012 / 1388; margin-bottom: 34px; } .br-mark { width: 100%; height: 100%; filter: drop-shadow(0 20px 40px rgba(111, 147, 204, .45)); } .has-3d .br-mark { visibility: hidden; } .br-title { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.1; letter-spacing: -.02em; padding-bottom: .08em; background: linear-gradient(180deg, #fff 35%, #9BA1AB); -webkit-background-clip: text; background-clip: text; color: transparent; } html[lang="ar"] .br-title { font-weight: 700; letter-spacing: 0; line-height: 1.35; } .br-sub { margin: 10px 0 0; font-family: 'Questrial', sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--silver); } @media (max-width: 860px) { .brand-reveal { min-height: 76svh; padding-block: 70px; } .br-slot { height: clamp(180px, 30vh, 260px); } } /* tighter spacing between the hero and the 'Your brand' section */ .js .hero-pin { padding-bottom: 64px; } .brand-reveal { min-height: 62vh; min-height: 62svh; padding-block: 24px 56px; } .br-slot { margin-bottom: 26px; } @media (max-width: 860px) { .brand-reveal { min-height: 56svh; padding-block: 16px 48px; } } /* ---------- Owner's website text (Nov 2026): section labels, story lead, service descriptions, 5 steps ---------- */ .sec-label { color: var(--light); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; } html[lang="ar"] .sec-label { letter-spacing: 0; font-size: .95rem; } .voice-lead { margin-top: 34px; color: var(--muted); font-size: 1.1rem; } .voice-lead + .voice { margin-top: 6px; } .svc-desc { margin-bottom: 22px; } .svc-more { margin-top: 6px; } .svc-more summary { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 999px; color: var(--light); font-size: .92rem; transition: border-color .3s, background .3s; } .svc-more summary::-webkit-details-marker { display: none; } .svc-more summary:hover, .svc-more summary:focus-visible { border-color: var(--line-strong); background: rgba(255, 255, 255, .04); } .svc-more summary .i { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .35s var(--ease); } .svc-more[open] summary .i { transform: rotate(-90deg); } .svc-more .m-close, .svc-more[open] .m-open { display: none; } .svc-more[open] .m-close { display: inline; } .svc-more[open] summary { margin-bottom: 20px; } .svc-more[open] > :not(summary) { animation: svc-more-in .45s var(--ease); } @keyframes svc-more-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .svc-more[open] > :not(summary) { animation: none; } } .svc-desc p { color: var(--muted); margin: 0 0 12px; max-width: 64ch; } .steps-many { grid-template-columns: repeat(5, 1fr); gap: 26px; } .steps-many .step h3 { font-size: clamp(1.15rem, 1.45vw, 1.4rem); } .steps-many .step p { font-size: .96rem; } @media (max-width: 1100px) { .steps-many { grid-template-columns: 1fr; gap: 30px; padding-inline-start: 34px; } .steps-many .steps-line { inset-inline: auto; inset-inline-start: 7px; top: 0; bottom: 0; width: 2px; height: auto; } .steps-many .steps-fill, [dir="rtl"] .steps-many .steps-fill { transform: scaleY(var(--fill, 0)); transform-origin: top; background: linear-gradient(180deg, var(--silver), #fff); } .steps-many .step { padding-top: 0; } .steps-many .step-dot { inset-inline-start: -34px; top: 6px; } .steps-many .step p { max-width: 560px; } }