@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap'); /* ========================================================================== Variables — Light (default) & Dark theme ========================================================================== */ :root { --color-primary: #712FE2; --color-primary-light: #9B6BEF; --color-accent: #28D897; --color-accent-dark: #1FB27C; --color-ink: #201A2B; --color-muted: #4e495e; --color-bg: #FFFFFF; --color-bg-soft: #F7F4FD; --color-bg-mint: #F1FBF7; --color-card: #FFFFFF; --color-border: #E9E4F5; --color-header-bg: rgba(255, 255, 255, 0.85); --gradient-brand: linear-gradient(120deg, var(--color-primary) 0%, #8B4CE8 45%, var(--color-accent) 100%); --shadow-card: 0 10px 30px rgba(113, 47, 226, 0.08); --shadow-card-hover: 0 16px 40px rgba(113, 47, 226, 0.14); --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --container: 1140px; } :root[data-theme="dark"] { --color-ink: #F3F0FA; --color-muted: #A79FC2; --color-bg: #121018; --color-bg-soft: #191627; --color-bg-mint: #191627; --color-card: #1D1929; --color-border: #322C45; --color-header-bg: rgba(18, 16, 24, 0.85); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.55); } /* ========================================================================== Reset ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 17px; } body { font-family: 'Tajawal', sans-serif; text-align: center; color: var(--color-ink); background: var(--color-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease, opacity 0.22s ease; } body.lang-fade { opacity: 0.35; } img { max-width: 100%; display: block; } ul { list-style: none; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } section[id] { scroll-margin-top: 96px; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section { padding: 72px 0; } .section-soft { background: var(--color-bg-soft); } .section-mint { background: var(--color-bg-mint); } .eyebrow { display: inline-block; font-size: 14px; font-weight: 700; color: var(--color-primary); background: rgba(113, 47, 226, 0.1); padding: 6px 18px; border-radius: 999px; margin-bottom: 16px; letter-spacing: 0.3px; } :root[data-theme="dark"] .eyebrow { background: rgba(155, 107, 239, 0.18); } .eyebrow-light { color: #fff; background: rgba(255, 255, 255, 0.18); } .section-title { font-size: clamp(26px, 5.5vw, 40px); font-weight: 900; color: var(--color-ink); margin-bottom: 14px; line-height: 1.35; } .section-subtitle { font-size: clamp(16px, 2.6vw, 19px); color: var(--color-muted); max-width: 620px; margin: 0 auto 40px; font-weight: 400; } .section-head { text-align: center; margin-bottom: 12px; } .check-icon { width: 14px; height: 14px; } /* ========================================================================== Shared icon system — every pulls from the sprite defined at the top of ========================================================================== */ .icon { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================================== Reveal animations — never opacity:0 (always visible, transform-driven) ========================================================================== */ .reveal { opacity: 1; transform: translateY(30px) scale(0.96); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); } .reveal.in-view { transform: translateY(0) scale(1); } .reveal-pop { opacity: 1; transform: translateY(24px) scale(0.8) rotate(-2deg); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .reveal-pop.in-view { transform: translateY(0) scale(1) rotate(0deg); } .reveal-alt { opacity: 1; transform: translateY(24px) translateX(30px); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); } .reveal-alt.in-view { transform: translateY(0) translateX(0); } .tile-grid .reveal-alt:nth-child(even), .usecase-grid .reveal-alt:nth-child(even) { transform: translateY(24px) translateX(-30px); } .tile-grid .reveal-alt:nth-child(even).in-view, .usecase-grid .reveal-alt:nth-child(even).in-view { transform: translateY(0) translateX(0); } /* Staggered entrance for grid items */ .tile-grid .reveal:nth-child(1), .tile-grid .reveal-alt:nth-child(1), .feature-grid .reveal:nth-child(1), .usecase-grid .reveal-alt:nth-child(1) { transition-delay: 0s; } .tile-grid .reveal:nth-child(2), .tile-grid .reveal-alt:nth-child(2), .feature-grid .reveal:nth-child(2), .usecase-grid .reveal-alt:nth-child(2) { transition-delay: 0.07s; } .tile-grid .reveal:nth-child(3), .tile-grid .reveal-alt:nth-child(3), .feature-grid .reveal:nth-child(3), .usecase-grid .reveal-alt:nth-child(3) { transition-delay: 0.14s; } .tile-grid .reveal:nth-child(4), .tile-grid .reveal-alt:nth-child(4), .feature-grid .reveal:nth-child(4), .usecase-grid .reveal-alt:nth-child(4) { transition-delay: 0.21s; } .tile-grid .reveal:nth-child(5), .tile-grid .reveal-alt:nth-child(5), .feature-grid .reveal:nth-child(5), .usecase-grid .reveal-alt:nth-child(5) { transition-delay: 0.28s; } .tile-grid .reveal:nth-child(6), .tile-grid .reveal-alt:nth-child(6), .feature-grid .reveal:nth-child(6), .usecase-grid .reveal-alt:nth-child(6) { transition-delay: 0.35s; } .tile-grid .reveal:nth-child(7), .tile-grid .reveal-alt:nth-child(7), .feature-grid .reveal:nth-child(7), .usecase-grid .reveal-alt:nth-child(7) { transition-delay: 0.42s; } .tile-grid .reveal:nth-child(8), .tile-grid .reveal-alt:nth-child(8), .feature-grid .reveal:nth-child(8), .usecase-grid .reveal-alt:nth-child(8) { transition-delay: 0.49s; } .tile-grid .reveal:nth-child(9), .tile-grid .reveal-alt:nth-child(9) { transition-delay: 0.56s; } .tile-grid .reveal:nth-child(10) { transition-delay: 0.63s; } .tile-grid .reveal:nth-child(11) { transition-delay: 0.7s; } .tile-grid .reveal:nth-child(12) { transition-delay: 0.77s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-pop, .reveal-alt { transition-duration: 0.01s !important; transition-delay: 0s !important; } } /* ========================================================================== Buttons & links ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: 999px; font-size: 17px; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--color-accent); color: #0B3B29; box-shadow: 0 10px 24px rgba(40, 216, 151, 0.35); } .btn-primary:hover { background: var(--color-accent-dark); box-shadow: 0 14px 30px rgba(40, 216, 151, 0.45); } .store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 18px; } .store-badge { display: flex; align-items: center; gap: 10px; background: #14121A; color: #fff; padding: 10px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); min-width: 168px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 10px 24px rgba(20, 18, 26, 0.25); } .store-badge svg { width: 24px; height: 24px; flex-shrink: 0; } .store-badge .badge-text { text-align: start; line-height: 1.25; } .store-badge .badge-text small { display: block; font-size: 11px; font-weight: 400; opacity: 0.75; } .store-badge .badge-text strong { display: block; font-size: 16px; font-weight: 700; } .store-badge:hover { transform: translateY(-3px); background: #000; box-shadow: 0 16px 32px rgba(20, 18, 26, 0.35); } .store-badges-cta .store-badge { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); box-shadow: none; } .store-badges-cta .store-badge:hover { background: rgba(255, 255, 255, 0.24); } .text-link { font-size: 15px; font-weight: 700; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .text-link:hover { color: var(--color-primary); } .text-link-light { color: rgba(255, 255, 255, 0.8); } .text-link-light:hover { color: #fff; } /* ========================================================================== Scroll progress — thin brand-gradient bar tracking page position ========================================================================== */ .scroll-progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%; background: var(--gradient-brand); z-index: 300; pointer-events: none; transition: width 0.12s linear; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } /* ========================================================================== Header (persistent — logo, theme/lang controls, download CTA) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 200; background: var(--color-header-bg); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.4s ease; } .site-header.scrolled { border-color: var(--color-border); box-shadow: 0 4px 20px rgba(113, 47, 226, 0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; } .brand { display: flex; align-items: center; gap: 8px; min-width: 0; } .brand img { height: 36px; width: auto; flex-shrink: 0; } .brand-name { font-weight: 900; font-size: 18px; color: var(--color-primary); white-space: nowrap; } .header-controls { display: flex; align-items: center; gap: 8px; } .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); color: var(--color-ink); transition: background 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .icon-btn:hover { background: var(--color-bg-soft); transform: translateY(-2px); } .icon-btn svg { width: 18px; height: 18px; } .icon-moon { display: block; } .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } .lang-toggle { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 13px; font-weight: 800; color: var(--color-ink); transition: background 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .lang-toggle:hover { background: var(--color-bg-soft); transform: translateY(-2px); } /* ========================================================================== Section navigation — top pill bar (post-hero) & side dock (deep scroll) ========================================================================== */ .nav-top-bar { position: fixed; top: 66px; left: 50%; z-index: 150; transform: translate(-50%, -140%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); pointer-events: none; max-width: calc(100% - 24px); } .nav-top-bar.nav-visible { transform: translate(-50%, 0); pointer-events: auto; } .nav-top-bar-inner { display: flex; gap: 4px; background: var(--color-header-bg); backdrop-filter: saturate(180%) blur(12px); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-card); overflow-x: auto; max-width: 100%; scrollbar-width: none; } .nav-top-bar-inner::-webkit-scrollbar { display: none; } .nav-link { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--color-muted); white-space: nowrap; transition: background 0.25s ease, color 0.25s ease; } .nav-link.active { background: var(--gradient-brand); color: #fff; } .side-dock { --offscreen: 140%; position: fixed; top: 50%; inset-inline-end: 16px; z-index: 150; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 22px; padding: 10px 7px; box-shadow: var(--shadow-card); visibility: hidden; transform: translateY(-50%) translateX(var(--offscreen)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.5s; pointer-events: none; } html[dir="ltr"] .side-dock { --offscreen: -140%; } .side-dock.nav-visible { visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; } .dock-dot { --nudge: -3px; position: relative; width: 42px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--color-muted); background: var(--color-bg-soft); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } html[dir="ltr"] .dock-dot { --nudge: 3px; } .dock-dot:hover { transform: translateX(var(--nudge)); } .dock-dot.active { background: var(--gradient-brand); color: #fff; transform: scale(1.06); } .dock-tooltip { position: absolute; inset-inline-end: 100%; top: 50%; margin-inline-end: 12px; background: var(--color-card); color: var(--color-ink); padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-card); border: 1px solid var(--color-border); transform: translateY(-50%) scale(0); transform-origin: center center; transition: transform 0.2s ease; } .dock-dot:hover .dock-tooltip, .dock-dot:focus-visible .dock-tooltip { transform: translateY(-50%) scale(1); } @media (max-width: 640px) { /* On phones the side dock becomes a thumb-reachable bottom bar */ .side-dock { top: auto; bottom: max(14px, env(safe-area-inset-bottom, 0px)); inset-inline-end: auto; inset-inline-start: auto; left: 50%; right: auto; flex-direction: row; gap: 4px; padding: 7px; border-radius: 999px; visibility: hidden; transform: translateX(-50%) translateY(160%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.5s; } .side-dock.nav-visible { transform: translateX(-50%) translateY(0); } .dock-dot { width: 36px; height: 36px; } .dock-dot:hover { transform: translateY(-3px); } .dock-tooltip { inset-inline-end: auto; top: auto; bottom: 100%; left: 50%; margin-inline-end: 0; margin-bottom: 10px; transform: translateX(-50%) scale(0); transform-origin: bottom center; } .dock-dot:hover .dock-tooltip, .dock-dot:focus-visible .dock-tooltip { transform: translateX(-50%) scale(1); } } /* ========================================================================== Hero — full height, mockup visual, floating & wave ========================================================================== */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 90px 0 70px; background: linear-gradient(155deg, #b3499d 2%, #a7f2ff 42%, #d3fffd 100%); overflow: hidden; } :root[data-theme="dark"] .hero { background: linear-gradient(155deg, #1B1330 0%, #121018 45%, #0D1C18 100%); } .hero-veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; mix-blend-mode: multiply; pointer-events: none; } :root[data-theme="dark"] .hero-veil { opacity: 0.9; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .hero-veil { opacity: 0.35; } } /* Ambient voice-waveform accent — echoes the logo's soundwave / app's audio theme */ .sound-wave { position: absolute; z-index: 1; inset-inline-start: 6%; bottom: 16%; display: flex; align-items: flex-end; gap: 5px; height: 44px; opacity: 0.5; pointer-events: none; } .sound-wave span { width: 5px; border-radius: 999px; background: var(--gradient-brand); transform-origin: bottom; animation: waveBounce 1.3s ease-in-out infinite; } .sound-wave span:nth-child(1) { height: 30%; animation-delay: -1.1s; } .sound-wave span:nth-child(2) { height: 55%; animation-delay: -0.4s; } .sound-wave span:nth-child(3) { height: 80%; animation-delay: -0.9s; } .sound-wave span:nth-child(4) { height: 100%; animation-delay: -0.2s; } .sound-wave span:nth-child(5) { height: 70%; animation-delay: -0.6s; } .sound-wave span:nth-child(6) { height: 45%; animation-delay: -1.3s; } .sound-wave span:nth-child(7) { height: 60%; animation-delay: -0.7s; } @keyframes waveBounce { 0%, 100% { transform: scaleY(0.32); } 50% { transform: scaleY(1); } } @media (max-width: 640px) { .sound-wave { inset-inline-start: 4%; bottom: 8%; height: 32px; } } @media (prefers-reduced-motion: reduce) { .sound-wave span { animation: none; transform: scaleY(0.7); } } .hero::before { content: ""; position: absolute; top: -120px; inset-inline-end: -100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(113, 47, 226, 0.16), transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; bottom: -140px; inset-inline-start: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(40, 216, 151, 0.18), transparent 70%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; } .hero-visual { position: relative; width: 100%; max-width: 420px; } .hero-visual::before { content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 85%; height: 65%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 72%); filter: blur(30px); z-index: 0; pointer-events: none; } :root[data-theme="dark"] .hero-visual::before { background: radial-gradient(circle, rgba(155, 107, 239, 0.4), transparent 72%); } .hero-visual::after { content: ""; position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); width: 62%; height: 26px; background: radial-gradient(ellipse at center, rgba(32, 26, 43, 0.28), transparent 75%); filter: blur(10px); z-index: 0; pointer-events: none; } :root[data-theme="dark"] .hero-visual::after { background: radial-gradient(ellipse at center, rgba(113, 47, 226, 0.45), transparent 75%); } .hero-visual-float { position: relative; z-index: 1; width: 100%; animation: floatY 4.5s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(32, 26, 43, 0.22)); } :root[data-theme="dark"] .hero-visual-float { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.5)); } .hero-visual-float img { width: 100%; height: auto; } @keyframes floatY { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .hero-visual-float { animation: none; } } .wave-divider { position: absolute; bottom: -1px; inset-inline-start: 0; width: 100%; line-height: 0; z-index: 1; } .wave-divider svg { width: 100%; height: 50px; display: block; } .wave-divider path { fill: var(--color-bg); } .hero-content h1 { font-size: clamp(34px, 8.5vw, 58px); font-weight: 900; line-height: 1.2; margin-bottom: 16px; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-content h2 { font-size: clamp(18px, 3.6vw, 23px); font-weight: 700; color: var(--color-ink); margin-bottom: 14px; line-height: 1.5; } .hero-content p { font-size: clamp(15px, 2.6vw, 18px); color: var(--color-muted); max-width: 560px; margin: 0 auto 28px; } .hero-scroll-hint { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--color-muted); z-index: 1; letter-spacing: 0.5px; transition: color 0.2s ease, transform 0.2s ease; } .hero-scroll-hint:hover { color: var(--color-primary); transform: translateX(-50%) translateY(-2px); } .hero-scroll-hint svg { width: 18px; height: 18px; animation: bounceDown 1.8s ease-in-out infinite; } @keyframes bounceDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* Trust bar — 2x2 grid, sits directly under the hero text/CTA column */ .trust-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; width: 100%; max-width: 460px; margin: 28px auto 0; } @media (min-width: 860px) { .hero-content .trust-bar { margin: 28px 0 0; max-width: 100%; } } .trust-item { display: flex; align-items: center; gap: 8px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--color-ink); box-shadow: var(--shadow-card); text-align: start; } .trust-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(40, 216, 151, 0.15); color: var(--color-accent-dark); display: flex; align-items: center; justify-content: center; } /* ========================================================================== Reality check (quotes) ========================================================================== */ .quotes-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 36px; } .quote-chip { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 20px; font-size: 16px; font-weight: 500; color: var(--color-ink); box-shadow: var(--shadow-card); position: relative; max-width: 320px; white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease; } @media (max-width: 420px) { .quote-chip { white-space: normal; } } .quote-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .quote-chip::before { content: "\201C"; position: absolute; top: 4px; inset-inline-end: 14px; font-size: 34px; color: var(--color-primary-light); font-family: Georgia, serif; line-height: 1; } .reality-copy { max-width: 560px; margin: 0 auto; color: var(--color-muted); font-size: 17px; } .reality-copy strong { display: block; margin-top: 18px; font-size: clamp(20px, 4vw, 25px); font-weight: 800; color: var(--color-primary); } /* ========================================================================== How it works — 3D magnetic-tilt hover cards (pure CSS sibling-hover trick) ========================================================================== */ .tilt-group { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 900px; margin: 0 auto; } @media (min-width: 860px) { .tilt-group { flex-direction: row; justify-content: center; align-items: flex-start; } } .tilt-container { position: relative; width: 100%; max-width: 240px; height: 300px; transition: 200ms; } .tilt-container:active { transform: scale(0.98); } .tilt-canvas { perspective: 800px; position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); } .tilt-tracker { position: relative; z-index: 2; width: 100%; height: 100%; } .tilt-tracker:hover { cursor: pointer; } .tilt-card { position: absolute; inset: 0; z-index: 0; border-radius: 26px; background: linear-gradient(150deg, var(--color-primary) 0%, #8B4CE8 45%, var(--color-accent) 100%); box-shadow: var(--shadow-card); transition: 300ms; } /* Step illustration cards — the supplied artwork sits behind the number, with a scrim layered on top so the number/title stay legible */ .tilt-card-photo { background-image: linear-gradient(185deg, rgba(30, 14, 56, 0.32) 0%, rgba(12, 16, 34, 0.62) 100%), var(--card-photo); background-size: cover; background-position: center; } .tilt-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 26px; background: inherit; filter: blur(2rem); opacity: 0.35; transition: 200ms; } .tilt-container:hover .tilt-card { filter: brightness(1.08); } .tilt-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); transition: opacity 0.3s ease; } .tilt-face-hover { opacity: 0; } .tilt-tracker:hover ~ .tilt-card .tilt-face-default, .tilt-container.touch-active .tilt-face-default { opacity: 0; } .tilt-tracker:hover ~ .tilt-card .tilt-face-hover, .tilt-container.touch-active .tilt-face-hover { opacity: 1; } .tilt-number { font-size: 40px; font-weight: 900; opacity: 0.9; } .tilt-prompt { font-size: 13px; font-weight: 700; opacity: 0.85; } .tilt-title { font-size: 18px; font-weight: 800; } .tilt-subtitle { font-size: 13px; line-height: 1.6; opacity: 0.95; } .noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 5x5 tracker grid → tilt angles (shared across all tilt cards) */ .tt-1:hover ~ .tilt-card { transform: rotateX(16deg) rotateY(-9deg); } .tt-2:hover ~ .tilt-card { transform: rotateX(16deg) rotateY(-4deg); } .tt-3:hover ~ .tilt-card { transform: rotateX(16deg) rotateY(0deg); } .tt-4:hover ~ .tilt-card { transform: rotateX(16deg) rotateY(4deg); } .tt-5:hover ~ .tilt-card { transform: rotateX(16deg) rotateY(9deg); } .tt-6:hover ~ .tilt-card { transform: rotateX(8deg) rotateY(-9deg); } .tt-7:hover ~ .tilt-card { transform: rotateX(8deg) rotateY(-4deg); } .tt-8:hover ~ .tilt-card { transform: rotateX(8deg) rotateY(0deg); } .tt-9:hover ~ .tilt-card { transform: rotateX(8deg) rotateY(4deg); } .tt-10:hover ~ .tilt-card { transform: rotateX(8deg) rotateY(9deg); } .tt-11:hover ~ .tilt-card { transform: rotateX(0deg) rotateY(-9deg); } .tt-12:hover ~ .tilt-card { transform: rotateX(0deg) rotateY(-4deg); } .tt-13:hover ~ .tilt-card { transform: rotateX(0deg) rotateY(0deg); } .tt-14:hover ~ .tilt-card { transform: rotateX(0deg) rotateY(4deg); } .tt-15:hover ~ .tilt-card { transform: rotateX(0deg) rotateY(9deg); } .tt-16:hover ~ .tilt-card { transform: rotateX(-8deg) rotateY(-9deg); } .tt-17:hover ~ .tilt-card { transform: rotateX(-8deg) rotateY(-4deg); } .tt-18:hover ~ .tilt-card { transform: rotateX(-8deg) rotateY(0deg); } .tt-19:hover ~ .tilt-card { transform: rotateX(-8deg) rotateY(4deg); } .tt-20:hover ~ .tilt-card { transform: rotateX(-8deg) rotateY(9deg); } .tt-21:hover ~ .tilt-card { transform: rotateX(-16deg) rotateY(-9deg); } .tt-22:hover ~ .tilt-card { transform: rotateX(-16deg) rotateY(-4deg); } .tt-23:hover ~ .tilt-card { transform: rotateX(-16deg) rotateY(0deg); } .tt-24:hover ~ .tilt-card { transform: rotateX(-16deg) rotateY(4deg); } .tt-25:hover ~ .tilt-card { transform: rotateX(-16deg) rotateY(9deg); } .tilt-tracker:hover ~ .tilt-card { transition: 150ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .tilt-tracker:hover ~ .tilt-card { transform: none !important; } } /* ========================================================================== Tile grids (audience / use cases) — corner-reveal cards, icon-free ========================================================================== */ .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; } .corner-card { position: relative; aspect-ratio: 1 / 1.2; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; } .corner-index { position: absolute; inset: 0; z-index: 2; /* raised above the gradient */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px; font-weight: 800; font-size: 14.5px; line-height: 1.35; color: var(--color-ink); transition: color 0.35s ease; /* only color changes now */ opacity: 1 !important; /* stays fully visible at all times */ pointer-events: none; /* prevents interference with hover */ } .corner-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-soft); color: var(--color-primary); box-shadow: 0 6px 16px rgba(113, 47, 226, 0.14); transform: scale(0.6) rotate(-10deg); transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .corner-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .reveal-alt.in-view .corner-icon { transform: scale(1) rotate(0deg); } .corner-card:hover .corner-icon { transform: scale(1.1) rotate(-6deg); } @media (prefers-reduced-motion: reduce) { .corner-icon { transition-duration: 0.01s; } } .corner-reveal { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0.12s; } .corner-card::before, .corner-card::after { position: absolute; content: ""; width: 24%; height: 24%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); transition: all 0.45s ease; } .corner-card::before { top: 0; inset-inline-end: 0; border-start-end-radius: 20px; border-end-start-radius: 100%; } .corner-card::after { bottom: 0; inset-inline-start: 0; border-end-start-radius: 20px; border-start-end-radius: 100%; } .corner-card:hover::before, .corner-card:hover::after, .corner-card.active::before, .corner-card.active::after { width: 100%; height: 100%; border-radius: 20px; } .corner-card:hover .corner-index { color: #fff !important; } .corner-reveal { display: none; } .tile-highlight { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-weight: 800; font-size: 14.5px; padding: 18px 20px; border-radius: var(--radius-md); } /* ========================================================================== Use cases — photographic mosaic (deliberately distinct from the icon-badge tile-grid used for the audience section above) ========================================================================== */ .usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; } @media (min-width: 640px) { .usecase-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .usecase-grid { grid-template-columns: repeat(4, 1fr); } } .usecase-card { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-card); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 18px 14px; text-align: center; background: var(--color-bg-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .usecase-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--card-img); background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); } .usecase-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(16, 10, 32, 0.92) 0%, rgba(16, 10, 32, 0.4) 58%, rgba(16, 10, 32, 0.06) 100%); transition: background 0.4s ease; } .usecase-card:hover, .usecase-card:focus-visible, .usecase-card.active { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); } .usecase-card:hover::before, .usecase-card:focus-visible::before, .usecase-card.active::before { transform: scale(1.09); } .usecase-card:hover .usecase-overlay, .usecase-card:focus-visible .usecase-overlay, .usecase-card.active .usecase-overlay { background: linear-gradient(0deg, rgba(96, 32, 180, 0.88) 0%, rgba(24, 16, 48, 0.5) 60%, rgba(10, 10, 20, 0.12) 100%); } .usecase-icon { position: relative; z-index: 2; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); transform: scale(0.6) rotate(-10deg); transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease; } .usecase-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .reveal-alt.in-view .usecase-icon { transform: scale(1) rotate(0deg); } .usecase-card:hover .usecase-icon, .usecase-card:focus-visible .usecase-icon, .usecase-card.active .usecase-icon { transform: scale(1.12) rotate(-6deg); background: rgba(255, 255, 255, 0.3); } .usecase-label { position: relative; z-index: 2; color: #fff; font-weight: 800; font-size: 14.5px; line-height: 1.35; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { .usecase-card, .usecase-card::before, .usecase-overlay, .usecase-icon { transition-duration: 0.01s; } } /* ========================================================================== Features (why) ========================================================================== */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 640px; margin: 0 auto; } .feature-card { display: flex; align-items: center; gap: 14px; background: var(--color-card); border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-card); text-align: start; font-weight: 600; font-size: 15.5px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-card-hover); } .feature-check { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; transform: scale(0.6) rotate(-10deg); transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .reveal.in-view .feature-check { transform: scale(1) rotate(0deg); } .feature-card:hover .feature-check { transform: scale(1.12) rotate(8deg); } @media (prefers-reduced-motion: reduce) { .feature-check { transition-duration: 0.01s; } } /* ========================================================================== Earnings tabs + flip cards (Section 6) ========================================================================== */ .tabs-nav { display: flex; justify-content: center; gap: 8px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px; max-width: 400px; margin: 0 auto 32px; box-shadow: var(--shadow-card); } .tab-btn { flex: 1; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--color-muted); transition: background 0.25s ease, color 0.25s ease; } .tab-btn.active { background: var(--gradient-brand); color: #fff; } .tab-panels { max-width: 460px; margin: 0 auto; } .tab-panel { display: none; } .tab-panel.active { display: block; } .flip-card { perspective: 1400px; } .flip-card-inner { position: relative; min-height: 280px; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; } .flip-card:hover .flip-card-inner, .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 30px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; } .flip-back { transform: rotateY(180deg); } .flip-front .price-per-minute { display: inline-block; background: rgba(113, 47, 226, 0.1); color: var(--color-primary); font-weight: 800; font-size: 22px; padding: 10px 22px; border-radius: 999px; margin-bottom: 10px; } .flip-front .badge-expert { font-size: 13px; color: var(--color-accent-dark); font-weight: 700; } .flip-hint { font-size: 13px; color: var(--color-muted); margin-top: 8px; } .calc-line { font-size: 15px; color: var(--color-muted); margin-bottom: 4px; } .calc-divider { height: 1px; width: 100%; background: var(--color-border); margin: 14px 0; } .calc-result { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 0; } .calc-result span:first-child { font-size: 14.5px; color: var(--color-muted); font-weight: 600; } .calc-result strong { font-size: 22px; font-weight: 900; color: var(--color-ink); } .calc-result.monthly strong { font-size: 28px; color: var(--color-primary); } .earnings-note { max-width: 460px; margin: 20px auto 0; font-size: 13.5px; color: var(--color-muted); background: var(--color-bg-mint); border-radius: var(--radius-sm); padding: 12px 16px; } /* ========================================================================== FAQ Accordion ========================================================================== */ .faq-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; text-align: start; box-shadow: var(--shadow-card); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .faq-item.open { border-color: var(--color-primary-light); box-shadow: var(--shadow-card-hover); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; font-size: 16px; font-weight: 700; color: var(--color-ink); text-align: start; } .faq-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(113, 47, 226, 0.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; transition: transform 0.3s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; } .faq-answer { padding: 0 20px 18px; font-size: 15px; color: var(--color-muted); line-height: 1.8; } /* ========================================================================== CTA + Footer (merged) — one animated brand-gradient surface. The CTA sits at the reading start (right in Arabic, left in English) and the footer brand block at the end, mirroring automatically via [dir]. ========================================================================== */ :root[data-theme="light"] .cta-footer { background: linear-gradient(155deg, #510b5f 0%, #510b5f 42%, #197477 100%); color: #ffffff; } .cta-footer { position: relative; overflow: hidden; background: none; color: #fff; padding: 76px 0 24px; } .cta-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 60%); } .cta-footer-veil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; mix-blend-mode: screen; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .cta-footer-veil { opacity: 0.28; } } /* Giant faded brand mark sitting in the background of the whole section, behind the CTA copy and footer content */ .cta-footer-watermark { position: absolute; z-index: 0; left: 50%; bottom: 20%; transform: translateX(-50%); width: min(50vw, 400px); aspect-ratio: 270 / 244; background-image: url('logo-icon-blur.png'); background-size: contain; background-repeat: no-repeat; background-position: center; filter: brightness(0) invert(1); opacity: 0.16; pointer-events: none; } :root[data-theme="dark"] .cta-footer-watermark { opacity: 0.08; } .cta-footer-inner { position: relative; z-index: 1; } .cta-footer-grid { display: grid; grid-template-columns: 1fr; gap: 44px; text-align: center; padding-bottom: 36px; } .cta-block h2 { font-size: clamp(26px, 6vw, 38px); font-weight: 900; margin-bottom: 10px; } .cta-block .tagline { font-size: clamp(17px, 3vw, 21px); font-weight: 700; margin-bottom: 26px; opacity: 0.95; } .footer-brand{ display:flex; align-items:center; gap:12px; } /* =============================== Footer RTL / LTR =================================*/ html[dir="rtl"] .footer-block{ direction:rtl; text-align:right; align-items:flex-start; } html[dir="ltr"] .footer-block{ direction:ltr; text-align:left; align-items:flex-start; } html[dir="rtl"] .footer-brand{ flex-direction:row; } html[dir="ltr"] .footer-brand{ flex-direction:row; } .footer-brand img { height: 34px; filter: brightness(0) invert(1); } .footer-brand span { font-size: 19px; font-weight: 800; color: #fff; } .footer-message { max-width: 420px; margin: 0 auto 14px; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, 0.8); } .footer-tagline { font-size: 15px; font-weight: 800; color: #fff; opacity: 0.92; } .footer-giant-brand { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 32px; } .footer-giant-name { font-size: clamp(28px, 6vw, 50px); font-weight: 900; line-height: 1; color: #fff; opacity: 0.95; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.55); text-align: center; } @media (min-width: 860px) { .cta-footer-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; text-align: start; gap: 32px; } .cta-block .store-badges { justify-content: flex-start; } .footer-block{ display:flex; flex-direction:column; gap:14px; } .footer-block .footer-brand { justify-content: flex-end; } .footer-message, .footer-tagline{ text-align:inherit; } } /* ========================================================================== Waitlist modal ========================================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; pointer-events: none; } .modal-overlay.open { visibility: visible; pointer-events: auto; } .modal-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 15, 0.6); opacity: 0; transition: opacity 0.3s ease; } .modal-overlay.open .modal-backdrop { opacity: 1; } .waitlist-panel { position: relative; z-index: 1; width: 100%; max-width: 360px; transform: scale(0.9) translateY(16px); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); background: linear-gradient(var(--color-card), var(--color-card)) padding-box, linear-gradient(120deg, transparent 25%, var(--color-primary), var(--color-accent)) border-box; border: 2px solid transparent; border-radius: 20px; padding: 32px 26px; box-shadow: var(--shadow-card-hover); } .modal-overlay.open .waitlist-panel { transform: scale(1) translateY(0); } .modal-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--color-muted); background: var(--color-bg-soft); transition: background 0.2s ease, color 0.2s ease; } .modal-close:hover { background: var(--color-border); color: var(--color-ink); } .waitlist-form { display: flex; flex-direction: column; align-items: center; gap: 20px; } .waitlist-heading { font-size: 19px; font-weight: 800; color: var(--color-ink); text-align: center; } .form-group { width: 100%; position: relative; display: flex; flex-direction: column; } .form-input { width: 100%; color: var(--color-ink); background: transparent; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 12px 8px; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s ease; } .form-input:focus { border-color: var(--color-primary-light); } .form-group label { position: absolute; top: 12px; inset-inline-start: 12px; padding: 0 4px; font-size: 15px; color: var(--color-muted); pointer-events: none; transition: 0.2s ease; } .form-group input:focus ~ label, .form-group input:valid ~ label { top: -9px; inset-inline-start: 8px; background: var(--color-card); font-size: 12px; color: var(--color-primary); } .waitlist-submit { width: 100%; padding: 13px; border-radius: 10px; background: var(--gradient-brand); color: #fff; font-weight: 800; font-size: 15px; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 10px 24px rgba(113, 47, 226, 0.3); } .waitlist-submit:hover { transform: translateY(-2px); } .waitlist-success { text-align: center; padding: 20px 0; font-size: 16px; font-weight: 600; color: var(--color-ink); } body.modal-lock { overflow: hidden; } /* ========================================================================== Responsive — small screens header adjustments ========================================================================== */ @media (max-width: 480px) { .brand-name { display: none; } } /* ========================================================================== Responsive — tablet & desktop ========================================================================== */ @media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 860px) { .hero-inner { flex-direction: row-reverse; text-align: start; gap: 56px; } .hero-content { text-align: start; flex: 1; } .hero-content p { margin: 0 0 28px; } .hero-content .store-badges { justify-content: flex-start; } .hero-visual { max-width: 540px; flex: 1 1 480px; } .section-head { max-width: 700px; margin: 0 auto; } .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }