@font-face { font-family:Plex; src:url('/static/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Plex; src:url('/static/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
:root { --navy:#171b49; --navy-deep:#0e1237; --gold:#e7b782; --ink:#222440; --muted:#65677b; --line:#e7e3dc; --paper:#f8f6f2; }
* { box-sizing:border-box; }
body { margin:0; min-inline-size:320px; background:var(--paper); color:var(--ink); font:16px/1.8 Plex,Tahoma,sans-serif; }
a { color:inherit; } a:focus-visible { outline:3px solid #50d6ad; outline-offset:4px; }
.skip { position:absolute; inset-block-start:-80px; inset-inline-start:15px; z-index:10; padding:8px 16px; background:#fff; } .skip:focus { inset-block-start:12px; }
.shell { inline-size:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.topbar { background:#fff; border-block-end:1px solid var(--line); } .topbar__inner { min-block-size:91px; display:flex; align-items:center; gap:20px; }
.topbar img { display:block; object-fit:contain; } .topbar strong { direction:ltr; font:800 27px/1.1 Arial,sans-serif; color:var(--navy); white-space:nowrap; } .topbar strong em { color:#b56d3a; font-style:normal; }
.topbar__caption { margin-inline-start:auto; color:var(--muted); font-size:12px; } .divider { inline-size:1px; block-size:40px; background:#d7d3da; }
.hero { overflow:hidden; position:relative; color:#fff; background:radial-gradient(circle at 2% 15%,#343864,transparent 44%),linear-gradient(125deg,var(--navy),var(--navy-deep)); padding:83px 0 100px; }
.hero::after { content:""; position:absolute; inline-size:620px; block-size:620px; border:1px solid rgba(231,183,130,.13); border-radius:50%; inset-inline-end:-190px; inset-block-end:-420px; pointer-events:none; }
.hero__grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr); gap:clamp(36px,6vw,100px); align-items:center; }
.eyebrow { margin:0; color:var(--gold); font:700 11px/1.5 Arial,sans-serif; letter-spacing:.18em; }
.status { display:inline-flex; align-items:center; gap:10px; margin-block:30px 8px; padding:7px 14px; border:1px solid rgba(231,183,130,.35); border-radius:50px; color:#f5d8ba; font-size:12px; }
.status i { inline-size:7px; block-size:7px; border-radius:50%; background:#6de0b7; box-shadow:0 0 0 5px rgba(109,224,183,.12); }
h1,h2,h3,p { margin-block-start:0; } h1 { max-inline-size:670px; margin-block:17px 22px; font-size:clamp(42px,5.2vw,70px); line-height:1.25; letter-spacing:-.035em; }
.lead { max-inline-size:650px; color:#d2d0dd; font-size:18px; line-height:1.95; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-block-start:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-block-size:54px; padding:12px 22px; border-radius:9px; text-decoration:none; font-weight:700; font-size:14px; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); } .button--primary { background:linear-gradient(120deg,#f1d1a1,#dca76e); color:var(--navy-deep); } .button--outline { border:1px solid rgba(238,214,188,.5); color:#fff; }
.credential-note { margin:16px 0 0; color:#b6b4c6; font-size:12px; }
.facts { display:grid; gap:12px; } .facts div { display:flex; align-items:center; gap:20px; min-block-size:109px; padding:20px 23px; border:1px solid rgba(238,214,188,.22); border-radius:13px; background:rgba(255,255,255,.045); }
.facts strong { min-inline-size:72px; color:#f1c895; font:700 42px/1 Arial,sans-serif; direction:ltr; } .facts span { color:#e6e1e5; font-size:13px; }
.workflow { padding-block:82px; } .section-head { margin-block-end:29px; } .section-head h2 { margin:10px 0 0; color:var(--navy); font-size:clamp(28px,3.4vw,43px); line-height:1.4; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; } .steps article { min-block-size:300px; padding:29px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 18px 40px rgba(38,35,61,.04); }
.steps article>span { color:#ab6b39; font:700 12px Arial,sans-serif; letter-spacing:.2em; } .steps h3 { margin:24px 0 10px; color:var(--navy); font-size:24px; } .steps p { color:var(--muted); font-size:14px; } .steps a { display:inline-block; margin-block-start:12px; color:#9e592f; font-size:13px; font-weight:700; text-decoration:none; }
.demo-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-block:0 75px; padding:35px 40px; background:var(--navy); color:#fff; border-radius:14px; }
.demo-panel h2 { margin:10px 0; font-size:28px; } .demo-panel p:not(.eyebrow) { max-inline-size:700px; margin:0; color:#cbc9d7; font-size:14px; } .demo-panel .button { flex:none; }
.commissioning { padding:0 0 75px; } .commissioning h2 { color:var(--navy); font-size:25px; } .commissioning p { max-inline-size:850px; color:var(--muted); }
footer { background:linear-gradient(130deg,#222550,#10143c); color:#d2d0dc; padding-block:42px 24px; } .footer-line { display:flex; justify-content:space-between; border-block-start:1px solid rgba(231,183,130,.18); padding-block-start:18px; font:700 10px Arial,sans-serif; letter-spacing:.12em; }
@media(max-width:760px) { .topbar__caption { display:none; } .hero { padding-block:56px 66px; } .hero__grid,.steps { grid-template-columns:1fr; } .facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .facts div { display:block; padding:14px; min-block-size:120px; } .facts strong { display:block; margin-block-end:10px; font-size:32px; } .facts span { font-size:11px; line-height:1.45; display:block; } .workflow { padding-block:55px; } .steps article { min-block-size:0; } .demo-panel { display:block; padding:27px; } .demo-panel .button { margin-block-start:22px; } }
@media(max-width:420px) { .shell { inline-size:calc(100% - 32px); } .topbar__inner { gap:10px; } .topbar img { width:73px; } .topbar strong { font-size:23px; } .facts { grid-template-columns:1fr 1fr; } .facts div:last-child { grid-column:1/-1; min-block-size:85px; } .facts div:last-child strong { display:inline-block; margin-inline-end:14px; } .actions .button { inline-size:100%; } }
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }