/* ============ LANGUAGE SECTIONS & TEXT ============ */ .lang-section{display:none;} .lang-section.active{display:block;} .lang-text{display:none;} .lang-text.active{display:inline;} /* Fallback when JavaScript never runs. Without this the page has no visible ".active" section at all and renders completely blank — including for any crawler or preview bot that does not execute scripts. The inline head script removes .no-js before first paint. */ .no-js .lang-section[data-lang="en"]{display:block;} .no-js .lang-text[data-lang="en"]{display:inline;} .no-js .menu-toggle,.no-js .theme-toggle,.no-js .lang-switch{display:none;} .no-js .hero-visual{display:none;} /* ============ TOKENS ============ */ :root{ --bg: #000; --bg-2: #08080A; --bg-3: #101014; --surface: #0C0C10; --border: rgba(255,255,255,0.07); --border-light: rgba(255,255,255,0.12); --text: #FFFFFF; /* raised from 0.55 / 0.35 — the old values measured 3.4:1 against #000 and failed WCAG 2.1 AA (4.5:1) for the eyebrow labels, captions and form labels that use them */ --text-muted: rgba(255,255,255,0.68); --text-dim: rgba(255,255,255,0.52); --danger: #FF8A80; --accent: #FFFFFF; --accent-hover: rgba(255,255,255,0.85); --accent-glow: rgba(255,255,255,0.15); --header-bg: rgba(0,0,0,0.75); --header-scroll-bg: #000; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --container: 1560px; } [data-theme="light"]{ --bg: #FFFFFF; --bg-2: #F5F5F7; --bg-3: #E8E8ED; --surface: #F0F0F2; --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.14); --text: #0A0A0A; --text-muted: rgba(0,0,0,0.66); --text-dim: rgba(0,0,0,0.56); --danger: #B3261E; --accent: #000000; --accent-hover: rgba(0,0,0,0.85); --accent-glow: rgba(0,0,0,0.10); --header-bg: rgba(255,255,255,0.8); --header-scroll-bg: #FFFFFF; } body.lang-ar{ --font-display: 'Cairo', sans-serif; --font-body: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; } /* ============ RESET ============ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } /* overflow-x:hidden on turns it into a scroll container in several engines, which silently breaks position:sticky on the header. clip gives the same overflow guard without creating a scroll container. */ body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;} @supports not (overflow:clip){body{overflow-x:hidden;}} body.menu-open{overflow:hidden;} [hidden]{display:none!important;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-0.02em;} p{margin:0;} input,textarea{font-family:inherit;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} /* Skip link — first tab stop for keyboard and screen reader users */ .skip-link{position:absolute;inset-inline-start:1rem;top:-4rem;z-index:300;background:var(--accent);color:var(--bg);padding:.7rem 1.2rem;border-radius:var(--radius-sm);font-weight:600;font-size:.88rem;transition:top .2s;} .skip-link:focus{top:1rem;} /* Honeypot — off-screen rather than display:none so naive bots still fill it */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);} /* ============ LABEL (eyebrow replacement) ============ */ .label{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-mono); font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--text-dim);font-weight:500; } /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.75rem 1.6rem;border-radius:999px;font-weight:600;font-size:.9rem;border:1px solid transparent;transition:all .25s ease;white-space:nowrap;} .btn-primary{background:var(--accent);color:var(--bg);} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);} .btn-outline{border-color:var(--border-light);color:var(--text);} .btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);} .btn-block{width:100%;} /* ============ HEADER ============ */ .site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .3s;} .site-header.scrolled{background:var(--header-scroll-bg);} .header-row{display:flex;align-items:center;justify-content:space-between;padding-block:.85rem;gap:1.5rem;} .brand{display:flex;align-items:center;} .brand img{height:64px;width:auto;} .main-nav{display:flex;align-items:center;gap:2.2rem;} .main-nav a{font-size:.88rem;color:var(--text-muted);font-weight:500;transition:color .2s;position:relative;} .main-nav a:hover{color:var(--text);} .main-nav a::after{content:'';position:absolute;inset-inline-start:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:width .25s;} .main-nav a:hover::after{width:100%;} .header-actions{display:flex;align-items:center;gap:.75rem;} .lang-switch{display:flex;gap:2px;background:var(--bg-3);border:1px solid var(--border);border-radius:999px;padding:3px;} .lang-switch button{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;color:var(--text-dim);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;transition:all .2s;} .lang-switch button:hover{color:var(--text);background:var(--bg-3);} .lang-switch button svg{flex:none;} /* Theme toggle */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--text-dim);transition:color .2s,background .2s;flex:none;} .theme-toggle:hover{color:var(--text);background:var(--bg-3);} .theme-toggle svg{width:16px;height:16px;} .theme-toggle .sun{display:none;} .theme-toggle .moon{display:block;} [data-theme="light"] .theme-toggle .sun{display:block;} [data-theme="light"] .theme-toggle .moon{display:none;} .header-cta{display:inline-flex;} .menu-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;color:var(--text);} .menu-toggle svg{width:20px;height:20px;} @media (max-width: 960px){ .main-nav{display:none;} .header-cta{display:none;} .menu-toggle{display:inline-flex;} } @media (max-width: 520px){ .lang-switch{display:none;} } /* Mobile menu */ .mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:200;padding:1.25rem 1.5rem 2rem;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);} .mobile-menu.open{transform:translateY(0);} .mobile-menu-top{display:flex;align-items:center;justify-content:space-between;} .mobile-menu-top img{height:18px;} .menu-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text);} .menu-close svg{width:18px;height:18px;} .mobile-nav{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;} .mobile-nav a{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text);padding-block:.8rem;border-bottom:1px solid var(--border);} /* The header language switch is hidden below 520px, so the mobile menu carries its own copy — otherwise phone visitors cannot change language. */ .mobile-menu-actions{display:flex;align-items:center;gap:.75rem;margin-top:2rem;} .mobile-menu .lang-switch{display:flex;} .mobile-menu .btn{margin-top:auto;} .mobile-menu[inert]{pointer-events:none;} /* ============ HERO ============ */ .hero{ position:relative;color:var(--text);overflow:hidden;background:var(--bg); min-height:85vh;display:flex;align-items:center; padding-block: 6rem 4rem; } .hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;text-align:center;}.hero .hero-cta-row{justify-content:center;} } .hero h1{font-size:clamp(2.6rem,3.8vw+1rem,4.8rem);font-weight:600;letter-spacing:-0.03em;} .hero h1 span{opacity:.55;font-weight:400;} .hero p.lead{margin-top:1.5rem;font-size:clamp(1rem,.5vw+.8rem,1.15rem);color:var(--text-muted);max-width:56ch;line-height:1.7;} .hero-cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;} .hero-visual{position:relative;aspect-ratio:1/1;max-height:480px;} .hero-visual canvas{width:100%;height:100%;display:block;} @media (max-width:900px){ .hero-visual{max-height:300px;margin-inline:auto;max-width:360px;} } /* ============ SECTION GENERIC ============ */ .section{padding-block:clamp(4.5rem,10vw,8rem);} .section-dark{background:var(--bg);} .section-alt{background:var(--bg-2);} .section-head{max-width:800px;margin-bottom:clamp(2.5rem,5vw,4rem);} .section-head h2{font-size:clamp(1.8rem,1.8vw+1rem,2.6rem);font-weight:600;margin-top:.8rem;} .section-head h2 span{opacity:.6;font-weight:400;} .section-head h2 .lang-text{opacity:1;font-weight:inherit;} .section-head h2 .lang-text span{opacity:.6;font-weight:400;} .section-head p.desc{margin-top:1rem;color:var(--text-muted);font-size:1rem;max-width:68ch;line-height:1.7;} .section-alt .section-head p.desc{color:var(--text-muted);} .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .reveal.is-visible{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}} /* Stagger */ .p-card:nth-child(1).reveal{transition-delay:0s;} .p-card:nth-child(2).reveal{transition-delay:.1s;} .p-card:nth-child(3).reveal{transition-delay:.2s;} .value-item:nth-child(1).reveal{transition-delay:0s;} .value-item:nth-child(2).reveal{transition-delay:.08s;} .value-item:nth-child(3).reveal{transition-delay:.16s;} .value-item:nth-child(4).reveal{transition-delay:.24s;} .metric:nth-child(1).reveal{transition-delay:0s;} .metric:nth-child(2).reveal{transition-delay:.1s;} .metric:nth-child(3).reveal{transition-delay:.2s;} .metric:nth-child(4).reveal{transition-delay:.3s;} /* ============ APPROACH SECTION ============ */ .approach-copy{max-width:80ch;} .approach-copy p{margin-top:1rem;color:var(--text-muted);font-size:1rem;line-height:1.75;} .approach-copy p strong{color:var(--text);font-weight:600;} .diagram{display:flex;align-items:center;gap:0;margin-top:clamp(2.5rem,5vw,3.5rem);} .diagram-box{flex:1 1 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.5vw,2rem);} .diagram-box .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);} .diagram-box h4{font-size:1.15rem;margin-top:.5rem;font-weight:600;} .diagram-box p{margin-top:.5rem;color:var(--text-muted);font-size:.9rem;line-height:1.6;} .diagram-wire{position:relative;flex:0 0 clamp(40px,7vw,90px);height:1px;background:var(--border);} .diagram-wire .dot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);transform:translate(-50%,-50%);animation:flow-x 2.4s linear infinite;} .diagram-wire.right .dot{animation-delay:1.2s;} @keyframes flow-x{0%{left:0%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}} .diagram-hub{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding-inline:clamp(.5rem,2vw,1.25rem);} .hub-ring{width:76px;height:76px;border-radius:50%;border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;position:relative;animation:float 4s ease-in-out infinite;} .hub-ring .ring-pulse{position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--accent-glow);animation:ring-expand 3s ease-out infinite;} @keyframes ring-expand{0%{transform:scale(.8);opacity:.6;}100%{transform:scale(1.5);opacity:0;}} @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}} .hub-ring img{width:34px;position:relative;z-index:1;} @media (max-width:760px){ .diagram{flex-direction:column;} .diagram-box{width:100%;} .diagram-wire{width:1px;height:clamp(32px,8vw,48px);flex:0 0 auto;} .diagram-wire .dot{animation-name:flow-y;left:50%;top:0;box-shadow:0 0 6px var(--accent);} @keyframes flow-y{0%{top:0%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}} } @media (prefers-reduced-motion: reduce){ .diagram-wire .dot{animation:none;left:50%;opacity:1;} .hub-ring{animation:none;} .hub-ring .ring-pulse{animation:none;opacity:0;} } /* ============ CARDS ============ */ .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem);} @media (max-width:960px){.cards-grid{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.cards-grid{grid-template-columns:1fr;}} .p-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.9rem;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;} .p-card:hover{transform:translateY(-4px);border-color:var(--border-light);box-shadow:0 24px 48px -24px rgba(0,0,0,.6);} .p-card .icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg-3);color:var(--text);flex:none;} .p-card .icon svg{width:22px;height:22px;} .p-card .cat{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-top:.1rem;} .p-card h3{font-size:1.25rem;font-weight:600;} .p-card p.desc{color:var(--text-muted);font-size:.92rem;line-height:1.65;} .p-card .cta{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.88rem;color:var(--text);margin-top:.3rem;} .p-card .cta svg{width:14px;height:14px;transition:transform .25s;} .p-card:hover .cta svg{transform:translateX(3px);} [dir="rtl"] .p-card .cta svg{transform:scaleX(-1);} [dir="rtl"] .p-card:hover .cta svg{transform:scaleX(-1) translateX(3px);} .p-card .foot{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.64rem;color:var(--text-dim);letter-spacing:.02em;} .p-card .foot img{height:9px;width:auto;} /* ============ VALUES ============ */ .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:clamp(2.5rem,5vw,3.5rem);} @media (max-width:960px){.values-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:540px){.values-grid{grid-template-columns:1fr;}} .value-item{padding:1.5rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);} .value-item .icon-badge{width:44px;height:44px;border-radius:11px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:1rem;animation:pulse-icon 3s ease-in-out infinite;} .value-item .icon-badge svg{width:22px;height:22px;} @keyframes pulse-icon{0%,100%{opacity:.6;}50%{opacity:1;}} .value-item h3{font-size:1.05rem;font-weight:600;} .value-item p{margin-top:.5rem;color:var(--text-muted);font-size:.88rem;line-height:1.65;} /* ============ METRICS ============ */ .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:clamp(2.5rem,5vw,3.5rem);} @media (max-width:900px){.metrics-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.metrics-grid{grid-template-columns:1fr;}} .metric{padding:1.5rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);} .metric .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,2vw+1.2rem,3rem);color:var(--text);line-height:1;letter-spacing:-0.02em;margin-top:.5rem;} .metric .cap{margin-top:.6rem;color:var(--text-muted);font-size:.88rem;max-width:26ch;line-height:1.6;} .metrics-note{margin-top:2.5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim);letter-spacing:.02em;text-align:center;} /* ============ FOOTER ============ */ .site-footer{background:var(--bg);padding-block:clamp(4rem,9vw,6rem) 2rem;position:relative;overflow:hidden;border-top:1px solid var(--border);} .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);} @media (max-width:900px){.footer-grid{grid-template-columns:1fr;}} .footer-copy h2{font-size:clamp(1.8rem,1.8vw+1rem,2.4rem);font-weight:600;} .footer-copy p.desc{color:var(--text-muted);margin-top:1rem;max-width:40ch;line-height:1.7;} .footer-contact-line{margin-top:2rem;font-family:var(--font-mono);font-size:.82rem;color:var(--text-dim);} .footer-contact-line a{color:var(--text);border-bottom:1px solid var(--border-light);padding-bottom:1px;} .footer-watermark{position:absolute;inset-inline-end:-30px;top:-30px;width:180px;opacity:.04;pointer-events:none;} @media (max-width:900px){.footer-watermark{display:none;}} .contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.25rem);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} @media (max-width:520px){.form-row{grid-template-columns:1fr;}} .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;} .field label{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);} .field input,.field textarea{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;color:var(--text);font-size:.9rem;transition:border-color .2s;} .field input::placeholder,.field textarea::placeholder{color:var(--text-dim);} .field input:focus,.field textarea:focus{outline:none;border-color:var(--border-light);} .field textarea{resize:vertical;min-height:100px;font-family:var(--font-body);} .form-status{margin-top:.8rem;font-family:var(--font-mono);font-size:.8rem;display:none;align-items:center;gap:.5rem;line-height:1.5;} .form-status.show{display:flex;} .form-status.ok{color:var(--text);} .form-status.err{color:var(--danger);} .form-consent{margin-top:1rem;font-size:.74rem;line-height:1.6;color:var(--text-dim);} .form-consent a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;} .form-consent a:hover{color:var(--text);} .footer-bottom{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;} .footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.82rem;color:var(--text-dim);} .footer-links a:hover{color:var(--text);} .footer-brand-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;} .footer-brand-row img{height:26px;} .copyright{font-size:.76rem;color:var(--text-dim);font-family:var(--font-mono);display:flex;gap:.4rem;flex-wrap:wrap;} .footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;} [dir="rtl"] .footer-meta{align-items:flex-start;} .export-link{font-size:.66rem;color:var(--text-dim);opacity:.5;font-family:var(--font-mono);transition:opacity .2s;} .export-link:hover{opacity:1;} /* ============ MISC ============ */ ::selection{background:var(--accent);color:var(--bg);} /* ============ LEGAL / CONTENT PAGES ============ */ .doc{max-width:76ch;margin-inline:auto;padding-block:clamp(3rem,7vw,5rem);} .doc h1{font-size:clamp(1.9rem,2vw+1rem,2.6rem);font-weight:600;} .doc h2{font-size:1.15rem;font-weight:600;margin-top:2.5rem;} .doc p,.doc li{color:var(--text-muted);font-size:.95rem;line-height:1.75;margin-top:.9rem;} .doc ul{list-style:disc;padding-inline-start:1.4rem;margin-top:.5rem;} .doc a{color:var(--text);text-decoration:underline;text-underline-offset:2px;} .doc .updated{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);margin-top:1rem;} .doc-note{margin-top:2rem;padding:1rem 1.2rem;border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--surface);font-size:.85rem;color:var(--text-muted);} /* ============ REDUCED MOTION (global sweep) ============ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} .value-item .icon-badge{opacity:1;} }