@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap"); /* ======================================================================== WebStackRank — Global stylesheet ====================================================================== */ :root{ --bg: #07060f; --bg-alt: #0c0a1a; --bg-elev: #131127; --surface: rgba(255,255,255,0.025); --surface-2: rgba(255,255,255,0.045); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14); --text: #f4f2ff; --text-dim: #a8a3c4; --text-muted: #6f6a8c; --primary: #6d5cff; --primary-2: #9b6bff; --accent: #ff7ab8; --warn: #ffb86b; --success: #4ade80; --grad-1: linear-gradient(135deg,#5b4cff 0%, #8b5cf6 45%, #ec4899 100%); --grad-soft: linear-gradient(135deg, rgba(91,76,255,.18), rgba(236,72,153,.18)); --grad-text: linear-gradient(110deg,#9b8cff 0%, #b78cff 30%, #ff9bc9 70%, #ffb78c 100%); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-glow: 0 30px 80px -20px rgba(91,76,255,.45); --font-display: "Bricolage Grotesque", "Sora", "Space Grotesk", system-ui, sans-serif; --font-body: "Sora", "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; /* Mobile Safari measures scroll width from , not — so we need this here too. `clip` is preferred over `hidden` because it doesn't create a scroll container (which would break position: sticky inside descendants). */ overflow-x: clip; } body{ margin:0; padding:0; /* override legacy app.css padding-top: var(--wsr-navbar-height) */ font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-x: clip; /* Fallback for browsers that don't support `clip` (pre-2022 Firefox/Safari). */ overflow-x: hidden; } /* ── ambient page glows ──────────────────────────────────────────── */ .page-glow{ position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 600px at 12% -10%, rgba(91,76,255,.20), transparent 60%), radial-gradient(800px 600px at 100% 20%, rgba(236,72,153,.13), transparent 60%), radial-gradient(700px 500px at 60% 110%, rgba(91,76,255,.12), transparent 60%); } main{ position: relative; z-index: 1; } /* ── Typography ──────────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; color: var(--text); margin: 0; } h1{ font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 600; letter-spacing: -.035em; } h2{ font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -.03em; } h3{ font-size: clamp(1.4rem, 1.9vw, 1.85rem); } h4{ font-size: 1.15rem; } p { color: var(--text-dim); margin: 0 0 1rem; } a { color: inherit; text-decoration: none; transition: color .2s ease; } a:hover{ color: var(--text); } .grad-text{ background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .muted{ color: var(--text-dim); } .mono{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } .eyebrow{ display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.02); backdrop-filter: blur(8px); } .eyebrow::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary); } /* ── Layout helpers ──────────────────────────────────────────────── */ .container{ max-width: 1280px; } section{ position: relative; padding: clamp(64px, 9vw, 130px) 0; } .section-head{ max-width: 760px; margin: 0 auto 4rem; text-align: center; } .section-head .eyebrow{ margin-bottom: 1.25rem; } .section-head p{ font-size: 1.05rem; margin-top: 1rem; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn{ --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .85rem; font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: -.005em; border-radius: 999px; border: 1px solid transparent; transition: all .25s cubic-bezier(.4,0,.2,1); display: inline-flex; align-items: center; gap: .55rem; position: relative; overflow: hidden; } .btn-grad{ background: var(--grad-1); color: #fff; box-shadow: 0 8px 24px -6px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.18); } .btn-grad:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 14px 38px -8px rgba(139,92,246,.7), inset 0 1px 0 rgba(255,255,255,.25); } .btn-grad::after{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s ease; } .btn-grad:hover::after{ transform: translateX(100%); } .btn-ghost{ background: rgba(255,255,255,.03); border: 1px solid var(--border-strong); color: var(--text); backdrop-filter: blur(8px); } .btn-ghost:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: var(--text); transform: translateY(-2px); } .btn-ghost:hover{ color: var(--text); } .btn .arrow{ transition: transform .25s ease; display:inline-block; } .btn:hover .arrow{ transform: translateX(3px); } .btn-sm{ --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: .55rem; font-size: .82rem; } .btn-lg{ --bs-btn-padding-x: 1.85rem; --bs-btn-padding-y: 1.05rem; font-size: 1.02rem; } /* ── Cards ───────────────────────────────────────────────────────── */ .card-base{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.65rem; transition: all .35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; height: 100%; } .card-base::before{ content:""; position: absolute; inset: 0; background: radial-gradient(400px 240px at var(--mx,50%) var(--my,0%), rgba(139,92,246,.10), transparent 60%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .card-base:hover{ border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-4px); } .card-base:hover::before{ opacity: 1; } .card-base .ico{ width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(91,76,255,.22), rgba(236,72,153,.18)); border: 1px solid var(--border); color: var(--text); margin-bottom: 1.1rem; } .card-base h3{ font-size: 1.2rem; margin-bottom: .55rem; } .card-base p{ font-size: .92rem; margin: 0; color: var(--text-dim); } /* ── Top promo bar + Navbar ──────────────────────────────────────── */ .promo-bar{ background: linear-gradient(90deg, rgba(91,76,255,.15), rgba(236,72,153,.12)); border-bottom: 1px solid var(--border); font-size: .85rem; text-align: center; padding: .55rem 1rem; color: var(--text-dim); position: relative; z-index: 30; } .promo-bar a{ color: var(--text); border-bottom: 1px solid currentColor; } .promo-bar .pulse{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); margin-right: .4rem; vertical-align: middle; box-shadow: 0 0 10px var(--success); animation: pulse 1.8s infinite; } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} } .navbar-wsr{ position: sticky; top: 0; z-index: 50; padding: .85rem 0; backdrop-filter: blur(14px); background: rgba(7,6,15,.65); border-bottom: 1px solid transparent; transition: all .3s ease; } .navbar-wsr.scrolled{ background: rgba(7,6,15,.85); border-bottom-color: var(--border); } .navbar-wsr .brand{ font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.025em; color: var(--text); display: inline-flex; align-items: center; gap: .55rem; } .navbar-wsr .brand .rank{ background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .navbar-wsr .brand .mark{ width: 30px; height: 30px; border-radius: 9px; background: var(--grad-1); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(139,92,246,.4); } .nav-link-wsr{ font-size: .92rem; color: var(--text-dim); padding: .45rem .85rem; border-radius: 8px; font-weight: 400; } .nav-link-wsr:hover, .nav-link-wsr.active{ color: var(--text); background: rgba(255,255,255,.04); } .nav-link-wsr.active{ background: rgba(255,255,255,.05); } .lang-pill{ display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text-dim); background: rgba(255,255,255,.02); } /* ── Mega menu ───────────────────────────────────────────────────── */ .has-mega{ position: relative; } /* Invisible bridge to cover the 10px gap between the trigger and the mega panel. Without this, the cursor leaves the .has-mega bounding box while transiting and fires mouseleave, closing the menu before it can reach the panel. Bridge is only active on desktop (where the gap exists); mobile uses inline layout. */ @media (min-width: 992px){ .has-mega::before{ content: ""; position: absolute; top: 100%; left: 50%; width: min(880px, 92vw); height: 18px; transform: translateX(-50%); pointer-events: none; z-index: 99; } .has-mega:hover::before, .has-mega.open::before{ pointer-events: auto; } } .nav-link-wsr{ display: inline-flex; align-items: center; gap: .3rem; } .has-mega > .nav-link-wsr{ cursor: pointer; padding-right: .7rem; } .has-mega > .nav-link-wsr::after{ content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s ease; } .has-mega.open > .nav-link-wsr::after{ transform: rotate(225deg) translateY(0); } .mega{ position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); width: min(880px, 92vw); background: rgba(12,10,26,.96); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.5rem; backdrop-filter: blur(18px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 100; } .has-mega.open .mega{ opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .mega a{ display: flex; align-items: flex-start; gap: .75rem; padding: .85rem; border-radius: 12px; transition: background .2s ease; } .mega a:hover{ background: rgba(255,255,255,.04); color: var(--text); } .mega a .ico{ width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(91,76,255,.22), rgba(236,72,153,.18)); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--text); } .mega a .title{ font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: var(--text); display: block; margin-bottom: .1rem; } .mega a p{ font-size: .78rem; color: var(--text-dim); margin: 0; line-height: 1.4; } @media (max-width: 991px){ .mega{ position: static; transform: none; width: 100%; padding: .75rem 0; background: transparent; border: 0; box-shadow: none; opacity: 1; pointer-events: auto; display: none; } .has-mega.open .mega{ display: block; transform: none; } .mega-grid{ grid-template-columns: 1fr; gap: 0; } .mega a{ padding: .65rem .85rem; } .has-mega > .nav-link-wsr::after{ margin-left: auto; } } /* ── Floating Action Stack (back-to-top + chat + WhatsApp) ───────── */ .fab-stack{ position: fixed; bottom: 22px; right: 22px; z-index: 250; display: flex; flex-direction: column-reverse; /* WhatsApp at bottom, chat middle, top button above */ align-items: flex-end; gap: 12px; pointer-events: none; /* children re-enable */ } .fab-stack > *{ pointer-events: auto; } /* RTL: anchor to bottom-left instead */ html[dir="rtl"] .fab-stack{ right: auto; left: 22px; align-items: flex-start; transform-origin: bottom left; } /* Generic FAB button */ .fab{ width: 54px; height: 54px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(0,0,0,.55), 0 4px 12px -4px rgba(0,0,0,.4); transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, opacity .2s ease; position: relative; } .fab:hover{ transform: translateY(-3px) scale(1.04); color: #fff; } .fab:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; } .fab:active{ transform: translateY(-1px) scale(.98); } /* Tooltip label on the left of the button (right in RTL) */ .fab::before{ content: attr(data-tooltip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: rgba(12,10,26,.95); color: var(--text); padding: .45rem .8rem; border-radius: 8px; border: 1px solid var(--border-strong); font-family: var(--font-body); font-size: .78rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(8px); } html[dir="rtl"] .fab::before{ right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); } .fab:hover::before, .fab:focus-visible::before{ opacity: 1; transform: translateY(-50%) translateX(0); } /* WhatsApp variant */ .fab--whatsapp{ background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 12px 28px -8px rgba(37,211,102,.55), 0 4px 12px -4px rgba(18,140,126,.35); } .fab--whatsapp::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37,211,102,.45); animation: fab-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes fab-pulse{ 0% { transform: scale(.92); opacity: .75; } 100% { transform: scale(1.45); opacity: 0; } } /* Live chat variant */ .fab--chat{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 50%, var(--accent) 100%); box-shadow: 0 12px 28px -8px rgba(139,92,246,.55); } /* Back-to-top variant: hidden until scrolled */ .fab--top{ background: rgba(255,255,255,.06); border: 1px solid var(--border-strong); color: var(--text); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(12px); } .fab--top.visible{ opacity: 1; visibility: visible; transform: none; } .fab--top:hover{ background: rgba(255,255,255,.1); color: var(--text); } /* Chat popup panel */ .fab-chat-wrap{ position: relative; display: inline-flex; } .fab-chat-panel{ position: absolute; bottom: calc(100% + 14px); right: 0; width: 320px; max-width: calc(100vw - 44px); background: rgba(12,10,26,.96); border: 1px solid var(--border-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -10px rgba(0,0,0,.7); backdrop-filter: blur(16px); transform-origin: bottom right; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1); } html[dir="rtl"] .fab-chat-panel{ right: auto; left: 0; transform-origin: bottom left; } .fab-chat-wrap.open .fab-chat-panel{ opacity: 1; transform: none; pointer-events: auto; } .fab-chat-head{ padding: 1rem 1.1rem .85rem; background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(236,72,153,.18)); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .85rem; } .fab-chat-head .avatar{ width: 40px; height: 40px; border-radius: 50%; background: var(--grad-1); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .85rem; flex-shrink: 0; } .fab-chat-head .name{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text); } .fab-chat-head .status{ font-size: .73rem; color: var(--text-dim); display: flex; align-items: center; gap: .35rem; margin-top: .15rem; } .fab-chat-head .status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .fab-chat-head .close-x{ margin-left: auto; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.15rem; padding: .15rem .35rem; line-height: 1; border-radius: 6px; } html[dir="rtl"] .fab-chat-head .close-x{ margin-left: 0; margin-right: auto; } .fab-chat-head .close-x:hover{ color: var(--text); background: rgba(255,255,255,.05); } .fab-chat-body{ padding: .85rem 1.1rem 1.1rem; } .fab-chat-body > p{ font-size: .85rem; color: var(--text-dim); margin: 0 0 .8rem; } .fab-chat-opt{ display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text); text-decoration: none; margin-bottom: .55rem; transition: all .2s ease; } .fab-chat-opt:last-child{ margin-bottom: 0; } .fab-chat-opt:hover{ background: rgba(255,255,255,.06); border-color: var(--border-strong); color: var(--text); transform: translateX(-2px); } html[dir="rtl"] .fab-chat-opt:hover{ transform: translateX(2px); } .fab-chat-opt .icon{ width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, rgba(91,76,255,.22), rgba(236,72,153,.18)); border: 1px solid var(--border); font-size: .95rem; } .fab-chat-opt .icon.green{ background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.35); color: #4ade80; } .fab-chat-opt .icon.blue{ background: rgba(91,76,255,.22); border-color: rgba(91,76,255,.4); color: #9b8cff; } .fab-chat-opt .icon.pink{ background: rgba(236,72,153,.18); border-color: rgba(236,72,153,.35); color: #ff9bc9; } .fab-chat-opt .label{ font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1.2; } .fab-chat-opt .sub{ font-size: .72rem; color: var(--text-muted); } /* Mobile sizing */ @media (max-width: 575px){ .fab-stack{ bottom: 16px; right: 16px; gap: 10px; } html[dir="rtl"] .fab-stack{ right: auto; left: 16px; } .fab{ width: 50px; height: 50px; font-size: 1.25rem; } .fab::before{ display: none; } /* hide tooltips on touch */ .fab-chat-panel{ width: calc(100vw - 32px); } } /* Hide legacy single WhatsApp button if present (replaced by .fab-stack) */ .wsr-whatsapp-btn{ display: none !important; } /* ── WhatsApp floating widget (legacy — kept for fallback) ───────── */ .wa-fab{ position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .wa-btn{ width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -6px rgba(37,211,102,.55); cursor: pointer; font-size: 1.6rem; position: relative; transition: transform .2s ease; } .wa-btn:hover{ transform: scale(1.06); color:#fff; } .wa-btn::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(37,211,102,.5); animation: wa-pulse 2s ease-out infinite; } @keyframes wa-pulse{ 0%{transform: scale(.9); opacity:.8} 100%{transform: scale(1.4); opacity:0} } .wa-panel{ width: 320px; max-width: calc(100vw - 44px); background: rgba(12,10,26,.95); border: 1px solid var(--border-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -10px rgba(0,0,0,.6); backdrop-filter: blur(14px); transform-origin: bottom right; opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: all .25s cubic-bezier(.4,0,.2,1); } .wa-fab.open .wa-panel{ opacity: 1; transform: none; pointer-events: auto; } .wa-head{ background: linear-gradient(135deg, #25D366, #128C7E); padding: 1.2rem 1.2rem 1rem; color: #fff; } .wa-head .avatar{ width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.3); margin-bottom: .55rem; font-family: var(--font-display); font-weight: 600; } .wa-head .name{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .wa-head .status{ font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .35rem; } .wa-head .status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b6ffb6; } .wa-body{ padding: 1rem 1.2rem 1.2rem; } .wa-bubble{ background: rgba(255,255,255,.06); border-radius: 12px 12px 12px 4px; padding: .75rem .9rem; font-size: .88rem; color: var(--text); margin-bottom: .85rem; } .wa-bubble small{ display: block; font-size: .68rem; color: var(--text-muted); margin-top: .35rem; } .wa-cta{ display: flex; align-items: center; justify-content: center; gap: .55rem; background: #25D366; color: #fff; padding: .75rem 1rem; border-radius: 10px; font-family: var(--font-display); font-weight: 500; font-size: .92rem; width: 100%; border: 0; text-decoration: none; } .wa-cta:hover{ background: #1ebe5b; color: #fff; } /* ── Hero ────────────────────────────────────────────────────────── */ .hero{ padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 9vw, 110px); position: relative; } .hero h1{ margin-bottom: 1.5rem; } .hero .lead{ font-size: 1.15rem; color: var(--text-dim); max-width: 540px; margin-bottom: 2.25rem; } .hero .cta-row{ display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.5rem; } .hero .meta{ display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-muted); } .hero .meta .dot{ width: 5px; height: 5px; background: var(--text-muted); border-radius: 50%; } .hero-orb{ position: absolute; right: -10%; top: 8%; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, rgba(155,108,255,.45), transparent 60%), radial-gradient(circle at 70% 60%, rgba(236,122,184,.35), transparent 60%); filter: blur(60px); pointer-events: none; animation: floaty 14s ease-in-out infinite; } @keyframes floaty{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-20px, 25px) } } .hero-card{ position: absolute; background: rgba(20,18,42,.85); border: 1px solid var(--border-strong); border-radius: 16px; padding: 1rem 1.15rem; font-size: .82rem; backdrop-filter: blur(14px); box-shadow: 0 18px 50px -10px rgba(0,0,0,.6); display: flex; align-items: center; gap: .85rem; animation: floaty 8s ease-in-out infinite; } .hero-card .dot-grad{ width: 36px; height: 36px; border-radius: 10px; background: var(--grad-1); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; } .hero-card .label{ font-family: var(--font-mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); } .hero-card .val{ font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--text); } /* ── Stats strip ─────────────────────────────────────────────────── */ .stats-strip{ padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); } .stat .num{ font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 500; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.04em; line-height: 1; } .stat .lbl{ font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-top: .55rem; } /* ── Marquee ─────────────────────────────────────────────────────── */ .marquee{ overflow: hidden; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track{ display: inline-flex; gap: 2.5rem; animation: scroll-x 40s linear infinite; white-space: nowrap; } .marquee-item{ display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--text-dim); } .marquee-item .bullet{ color: var(--primary); } @keyframes scroll-x{ to{ transform: translateX(-50%); } } /* ── Service pill row (One Agency, Every Digital Service) ────────── */ .service-pills{ display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; max-width: 880px; margin: 2.5rem auto 0; } .service-pills .pill{ font-family: var(--font-display); font-size: .88rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text-dim); transition: all .25s ease; display: inline-flex; align-items: center; gap: .45rem; } .service-pills .pill:hover{ border-color: var(--primary); color: var(--text); background: rgba(91,76,255,.08); transform: translateY(-2px); } .service-pills .pill::before{ content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } /* ── Process steps ───────────────────────────────────────────────── */ .process-step{ border: 1px solid var(--border); border-radius: var(--radius); padding: 1.65rem; background: var(--surface); height: 100%; position: relative; transition: all .3s ease; } .process-step:hover{ border-color: var(--border-strong); transform: translateY(-3px); } .process-step .step-num{ width: 34px; height: 34px; border-radius: 10px; background: var(--grad-1); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: #fff; margin-bottom: 1.1rem; } /* Keep process step titles on a single line on tablet+ — fluid font size so the longest title ("Design & Prototype") fits the narrowest card width. */ .process-step h3 { font-size: clamp(1.05rem, 1.4vw + .35rem, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em; } @media (max-width: 575.98px) { /* On phones the cards stack full-width — let titles wrap naturally for legibility */ .process-step h3 { white-space: normal; overflow: visible; font-size: 1.25rem; } } /* ── Industries grid ─────────────────────────────────────────────── */ .industry-card{ text-align: center; padding: 1.6rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: all .3s ease; height: 100%; } .industry-card:hover{ border-color: var(--primary); background: rgba(91,76,255,.06); transform: translateY(-3px); } .industry-card .ico{ width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 12px; background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); } .industry-card .name{ font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin-bottom: .35rem; } .industry-card p{ font-size: .82rem; margin: 0; } /* ── Location cards ──────────────────────────────────────────────── */ .loc-card{ border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); height: 100%; transition: all .3s ease; } .loc-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); } .loc-card .code{ font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: .1em; color: var(--text); display: block; margin-bottom: .35rem; } .loc-card .city{ font-size: .85rem; color: var(--primary); margin-bottom: .85rem; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .loc-card p{ font-size: .88rem; margin: 0; } .loc-card.compact{ padding: 1rem 1.25rem; } .loc-card.compact .code{ font-size: 1rem; display: inline; margin-right: .85rem; } .loc-card.compact .city{ display: inline; font-size: .88rem; color: var(--text-dim); text-transform: none; letter-spacing: normal; font-family: var(--font-body); } /* ── Mid-section CTA card ────────────────────────────────────────── */ .midcta{ border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4rem); background: radial-gradient(800px 400px at 50% 0%, rgba(139,92,246,.18), transparent 60%), rgba(255,255,255,.02); text-align: center; position: relative; overflow: hidden; } .midcta::before{ content:""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); pointer-events: none; } .midcta > *{ position: relative; } .midcta .ico-pop{ width: 64px; height: 64px; border-radius: 18px; background: var(--grad-1); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; box-shadow: var(--shadow-glow); } /* ── Footer CTA banner (Skipmatrix-inspired) ─────────────────────── */ /* Image+gradient background applies to EVERY .footer-cta sitewide. Tinted gradient overlay keeps the dark heading text readable on top of the underlying "web design.png" illustration. */ .footer-cta{ /* Lower gradient alphas so the underlying web design.png illustration shows through clearly */ background: linear-gradient(135deg, rgba(112, 92, 255, .55) 0%, rgba(196, 92, 235, .45) 45%, rgba(244, 110, 175, .42) 75%, rgba(255, 184, 107, .35) 100%), url('/images/images%202/web%20design.png'); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; padding: clamp(70px, 10vw, 130px) 0; position: relative; overflow: hidden; isolation: isolate; color: #ffffff; } .footer-cta::before{ content:""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000, transparent 80%); z-index: 0; pointer-events: none; } .footer-cta::after{ content:""; position: absolute; right: -10%; bottom: -50%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%); filter: blur(40px); z-index: 0; pointer-events: none; } .footer-cta .inner{ position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; } .footer-cta, .footer-cta h1, .footer-cta h2, .footer-cta h3, .footer-cta .h2, .footer-cta p, .footer-cta .lead { color: #ffffff !important; } .footer-cta h2{ font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -.035em; margin-bottom: 1rem; text-shadow: 0 4px 20px rgba(0,0,0,.35); } .footer-cta p{ color: rgba(255,255,255,.94) !important; font-size: 1.05rem; margin-bottom: 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); } .footer-cta .btn-light-grad{ background: #ffffff; color: #0a0814; padding: 1rem 1.8rem; border-radius: 999px; font-family: var(--font-display); font-weight: 500; font-size: 1rem; display: inline-flex; align-items: center; gap: .55rem; transition: all .25s ease; position: relative; z-index: 1; } .footer-cta .btn-light-grad:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(0,0,0,.4); } .footer-cta .btn-grad, .footer-cta .btn-ghost-light, .footer-cta .btn, .footer-cta a { position: relative; z-index: 1; } @media (max-width: 575.98px) { .footer-cta { background-position: center, center 30%; } } /* ── Footer ──────────────────────────────────────────────────────── */ .site-footer{ background: #f4f3ef; color: #1a1726; padding: 80px 0 32px; position: relative; z-index: 2; } .site-footer h5{ font-family: var(--font-display); font-size: .85rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #6d5cff; margin-bottom: 1.25rem; } .site-footer a{ color: #3d3a52; font-size: .92rem; display: inline-block; padding: .25rem 0; } .site-footer a:hover{ color: #6d5cff; } .site-footer .brand{ font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: #1a1726; margin-bottom: 1rem; display: inline-block; } .site-footer .brand .rank{ color: #6d5cff; } .site-footer .desc{ color: #6a6680; font-size: .92rem; max-width: 280px; } .site-footer .social{ display: flex; gap: .55rem; margin-top: 1.25rem; } .site-footer .social a{ width: 36px; height: 36px; border-radius: 10px; background: #e9e7e0; display: inline-flex; align-items: center; justify-content: center; color: #1a1726; padding: 0; } .site-footer .social a:hover{ background: #6d5cff; color: #fff; } .site-footer .nl-input{ display: flex; gap: .35rem; align-items: center; background: #e6e4dd; border-radius: 999px; padding: .35rem; max-width: 320px; } .site-footer .nl-input input{ flex: 1; background: transparent; border: 0; outline: 0; padding: .55rem .85rem; color: #1a1726; font-size: .9rem; } .site-footer .nl-input input::placeholder{ color: #8a8698; } .site-footer .nl-input button{ width: 38px; height: 38px; border-radius: 50%; background: var(--grad-1); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; } .site-footer .legal{ border-top: 1px solid #d9d6cc; padding-top: 1.5rem; margin-top: 3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: #6a6680; } .site-footer .legal a{ font-size: .85rem; color: #3d3a52; margin-left: 1rem; padding: 0; } /* ── Pricing table ───────────────────────────────────────────────── */ .compare-table{ width: 100%; color: var(--text); border-collapse: collapse; } .compare-table thead th{ font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); padding: 1.25rem 1.4rem; border: 0; background: rgba(255,255,255,.025); font-weight: 500; } .compare-table thead th.plan{ font-family: var(--font-display); font-size: .95rem; color: var(--text); letter-spacing: -.01em; text-transform: none; font-weight: 600; } .compare-table thead th.plan.featured{ background: rgba(139,92,246,.12); color: #fff; } .compare-table tbody td{ padding: 1rem 1.4rem; border-top: 1px solid var(--border); color: var(--text); font-size: .92rem; vertical-align: middle; } .compare-table tbody td.feat{ color: #fff; font-weight: 500; } .compare-table tbody td.center{ text-align: center; color: var(--text-dim); } .compare-table tbody td.featured{ background: rgba(139,92,246,.06); color: #fff; text-align: center; } .compare-table .check{ color: var(--success); font-size: 1.15rem; } .compare-table .dash{ color: var(--text-muted); } /* ── Pricing ─────────────────────────────────────────────────────── */ .pricing-toggle{ display: inline-flex; padding: .35rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); } .pricing-toggle button{ border: 0; background: transparent; color: var(--text-dim); padding: .55rem 1.25rem; border-radius: 999px; font-family: var(--font-display); font-size: .9rem; font-weight: 500; transition: all .25s ease; display: inline-flex; align-items: center; gap: .5rem; } .pricing-toggle button.active{ background: var(--grad-1); color: #fff; box-shadow: 0 4px 14px rgba(139,92,246,.4); } .pricing-toggle .badge-save{ font-size: .65rem; padding: .15rem .4rem; border-radius: 999px; background: rgba(255,255,255,.18); } .plan-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; height: 100%; position: relative; display: flex; flex-direction: column; transition: all .35s ease; } .plan-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); } .plan-card.featured{ background: radial-gradient(500px 320px at 50% -10%, rgba(139,92,246,.20), transparent 60%), rgba(255,255,255,.04); border-color: rgba(139,92,246,.4); box-shadow: 0 24px 60px -20px rgba(139,92,246,.45); } .plan-card .plan-tag{ display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .8rem; } .plan-card .plan-tag.featured{ background: var(--grad-1); color: #fff; padding: .25rem .65rem; border-radius: 999px; position: absolute; top: -12px; right: 1.5rem; } .plan-card h3{ font-size: 1.4rem; margin-bottom: .4rem; } .plan-card .price{ display: flex; align-items: baseline; gap: .35rem; margin: 1.25rem 0; } .plan-card .price .amt{ font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; } .plan-card .price .cur{ font-family: var(--font-display); font-size: 1.1rem; color: var(--text-dim); } .plan-card .price .per{ font-size: .85rem; color: var(--text-muted); margin-left: .2rem; } .plan-card ul{ list-style: none; padding: 0; margin: 1.5rem 0 2rem; flex: 1; } .plan-card ul li{ position: relative; padding: .45rem 0 .45rem 1.75rem; font-size: .92rem; color: var(--text-dim); border-top: 1px dashed rgba(255,255,255,.06); } .plan-card ul li:first-child{ border-top: 0; } .plan-card ul li::before{ content:""; position: absolute; left: 0; top: .85rem; width: 16px; height: 16px; border-radius: 50%; background: rgba(91,76,255,.18); border: 1px solid rgba(139,92,246,.4); } .plan-card ul li::after{ content:""; position: absolute; left: 5px; top: 1.05rem; width: 5px; height: 9px; border-right: 2px solid var(--primary-2); border-bottom: 2px solid var(--primary-2); transform: rotate(45deg); } /* ── Forms ───────────────────────────────────────────────────────── */ .form-wsr label{ font-size: .82rem; color: var(--text-dim); font-family: var(--font-display); font-weight: 500; margin-bottom: .4rem; display: block; } .form-wsr .form-control, .form-wsr .form-select{ background: rgba(255,255,255,.02); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .95rem; transition: all .25s ease; } .form-wsr .form-control::placeholder{ color: var(--text-muted); } .form-wsr .form-control:focus, .form-wsr .form-select:focus{ background: rgba(255,255,255,.04); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91,76,255,.15); color: var(--text); } .form-wsr textarea.form-control{ min-height: 130px; resize: vertical; } .form-wsr .form-select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a8a3c4'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 14px 14px !important; padding-right: 2.2rem !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .form-wsr .form-select option{ background: #14122a; color: var(--text); } /* Global safety net: ensure all native