@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --night: #07111f;
  --night-2: #0b182a;
  --navy: #102441;
  --blue: #2563ff;
  --blue-2: #4f8cff;
  --cyan: #36d6ff;
  --orange: #ff7a1a;
  --green: #22c995;
  --ink: #111d2f;
  --muted: #6f7e92;
  --surface: #f3f6fa;
  --line: #dce3ec;
  --white: #fff;
  --shadow: 0 28px 80px rgba(7, 17, 31, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Tajawal", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { transition: .22s ease; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 48px)); margin: auto; }

.boot { min-height: 100vh; display: grid; place-content: center; gap: 18px; background: #f7faff; color: #071a39; }
.boot .wordmark { font: 800 44px/1 "Manrope", sans-serif; letter-spacing: 14px; }
.boot span { width: 45px; height: 2px; background: var(--blue); animation: loading 1s infinite alternate; }
@keyframes loading { to { width: 100%; opacity: .35; } }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 12px; direction: ltr; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; position: relative; display: flex; align-items: flex-end; gap: 3px; padding: 8px; border: 1px solid rgba(255,255,255,.24); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 5px; height: 5px; border-color: var(--cyan); }
.brand-mark::before { top: 3px; left: 3px; border-top: 1px solid; border-left: 1px solid; }
.brand-mark::after { right: 3px; bottom: 3px; border-right: 1px solid; border-bottom: 1px solid; }
.brand-mark i { display: block; width: 5px; background: #fff; transform: skewY(-24deg); }
.brand-mark i:nth-child(1) { height: 13px; }
.brand-mark i:nth-child(2) { height: 21px; background: var(--blue-2); }
.brand-mark i:nth-child(3) { height: 16px; }
.brand-mark.mini { width: 34px; height: 34px; padding: 7px; }
.brand-copy { display: grid; color: #fff; }
.brand-copy strong { font: 800 24px/1 "Manrope", sans-serif; letter-spacing: 8px; }
.brand-copy small { margin-top: 6px; font: 600 6px/1 "Manrope", sans-serif; letter-spacing: 2.5px; color: #8294ad; }

/* Navigation */
.nav { height: 82px; position: absolute; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 46px; }
.nav-links { display: flex; align-items: center; gap: 29px; font-size: 12px; font-weight: 600; color: #a8b6ca; }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; right: 0; left: 100%; bottom: -9px; height: 1px; background: var(--cyan); }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { left: 0; }
.nav-actions { margin-right: auto; display: flex; align-items: center; gap: 12px; }
.workspace-link { display: inline-flex; align-items: center; gap: 8px; color: #b6c3d5; font-size: 11px; font-weight: 600; padding: 11px 13px; }
.workspace-link:hover { color: #fff; }
.workspace-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--cyan); box-shadow: 0 0 0 4px rgba(54,214,255,.08); }
.btn { min-height: 46px; border: 0; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 12px; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--blue); box-shadow: 0 14px 34px rgba(37,99,255,.28); }
.btn-primary:hover { background: #3e74ff; }
.btn-glass { color: #d9e4f3; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.btn-dark { background: var(--night); color: #fff; }
.btn-light { background: #edf2f8; color: var(--ink); }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 10px; }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,201,149,.10); }

/* Hero */
.hero { min-height: 850px; padding: 162px 0 70px; position: relative; overflow: hidden; color: #fff; background: var(--night); }
.hero-grid-lines { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(112,148,195,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(112,148,195,.10) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, #000, transparent 95%); }
.hero-grid-lines::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(54,214,255,.17) 50%, transparent 50.2%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.glow-one { width: 620px; height: 620px; top: -230px; right: 35%; background: radial-gradient(circle, rgba(37,99,255,.22), transparent 68%); }
.glow-two { width: 500px; height: 500px; left: -180px; bottom: -180px; background: radial-gradient(circle, rgba(54,214,255,.10), transparent 66%); }
.hero-grid { min-height: 585px; position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 64px; }
.hero-copy { padding-bottom: 20px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; color: #91a4bd; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); font: 600 9px/1 "Manrope", "Tajawal", sans-serif; letter-spacing: 1.5px; direction: ltr; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.eyebrow b { margin-left: 14px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); color: #536a88; }
.hero h1 { max-width: 680px; margin: 30px 0 23px; color: #fff; font-size: clamp(50px, 6.2vw, 82px); line-height: 1.08; letter-spacing: -3.8px; font-weight: 800; }
.hero h1 span { color: transparent; background: linear-gradient(115deg, #fff 0%, #64deff 36%, #4d80ff 100%); -webkit-background-clip: text; background-clip: text; position: relative; white-space: nowrap; }
.hero h1 span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; background: var(--orange); box-shadow: 0 0 24px rgba(255,122,26,.65); }
.hero-copy > p { max-width: 625px; margin: 0; color: #9aabc2; font-size: 16px; line-height: 2; }
.hero-actions { display: flex; gap: 11px; margin-top: 34px; }
.trust-row { margin-top: 55px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); display: grid; grid-template-columns: repeat(3, 1fr); max-width: 620px; }
.trust-row > div { display: flex; align-items: center; gap: 10px; border-left: 1px solid rgba(255,255,255,.09); padding: 0 14px; }
.trust-row > div:first-child { padding-right: 0; }
.trust-row > div:last-child { border: 0; }
.trust-row b { color: var(--cyan); font: 700 10px/1 "Manrope", sans-serif; }
.trust-row span { color: #7e90a8; font-size: 10px; line-height: 1.5; }

/* Hero architecture */
.system-visual { height: 520px; position: relative; border: 1px solid rgba(255,255,255,.12); background: rgba(10,25,44,.72); backdrop-filter: blur(14px); padding: 17px; box-shadow: 0 45px 100px rgba(0,0,0,.24); }
.system-visual::before, .system-visual::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--cyan); opacity: .75; }
.system-visual::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.system-visual::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.system-label { height: 33px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); color: #607793; font: 600 7px/1 "Manrope", sans-serif; letter-spacing: 2px; }
.system-label b { color: var(--green); position: relative; padding-right: 12px; }
.system-label b::before { content: ""; position: absolute; right: 0; top: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.system-stage { height: 418px; position: relative; overflow: hidden; background-image: linear-gradient(rgba(104,145,198,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(104,145,198,.08) 1px, transparent 1px); background-size: 28px 28px; }
.system-stage::before, .system-stage::after { content: ""; position: absolute; background: rgba(54,214,255,.20); }
.system-stage::before { width: 1px; top: 9%; bottom: 9%; left: 50%; }
.system-stage::after { height: 1px; left: 8%; right: 8%; top: 50%; }
.system-radar { position: absolute; border: 1px solid rgba(82,141,255,.18); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.radar-a { width: 325px; height: 325px; border-style: dashed; animation: radar-spin 24s linear infinite; }
.radar-b { width: 230px; height: 230px; }
.radar-b::before, .radar-b::after { content: ""; position: absolute; inset: 36px; border: 1px solid rgba(54,214,255,.18); border-radius: 50%; }
.radar-b::after { inset: 76px; background: rgba(37,99,255,.05); }
@keyframes radar-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.system-core { width: 138px; height: 138px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); display: grid; place-content: center; text-align: center; border: 1px solid rgba(76,137,255,.72); background: linear-gradient(145deg, #102b53, #0a1b31); box-shadow: 0 0 0 9px rgba(37,99,255,.05), 0 24px 65px rgba(0,0,0,.35); z-index: 4; }
.system-core > * { transform: rotate(-45deg); }
.core-index { position: absolute; top: 7px; left: 8px; color: #587398; font: 600 6px/1 "Manrope", sans-serif; }
.system-core strong { color: #fff; font: 800 28px/1 "Manrope", sans-serif; letter-spacing: 8px; }
.system-core small { color: var(--cyan); font: 600 6px/1 "Manrope", sans-serif; letter-spacing: 1.5px; margin-top: 8px; }
.system-core i { width: 23px; height: 2px; background: var(--orange); margin: 11px auto 0; box-shadow: 0 0 15px rgba(255,122,26,.8); }
.system-node { width: 140px; min-height: 56px; padding: 9px 10px; position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; color: white; border: 1px solid rgba(255,255,255,.13); background: rgba(7,17,31,.88); box-shadow: 0 14px 35px rgba(0,0,0,.20); }
.system-node > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(79,140,255,.35); color: var(--cyan); }
.system-node div { display: grid; }
.system-node small { color: #607796; font: 600 6px/1 "Manrope", sans-serif; letter-spacing: 1px; }
.system-node strong { margin-top: 5px; font-size: 10px; }
.system-node > i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 12px var(--blue); }
.node-payment { top: 55px; left: 28px; }.node-payment > i { right: -54px; top: 50%; }
.node-network { top: 55px; right: 28px; }.node-network > i { left: -54px; top: 50%; }
.node-operations { bottom: 45px; left: 28px; }.node-operations > i { right: -54px; top: 50%; }
.node-data { bottom: 45px; right: 28px; }.node-data > i { left: -54px; top: 50%; }
.system-status { height: 34px; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08); color: #66809f; font-size: 8px; }
.system-status span { display: flex; align-items: center; gap: 7px; }.system-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.system-status b { color: #9bb2cc; font: 600 8px "Manrope", sans-serif; }
.hero-ticker { height: 42px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; overflow: hidden; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); color: #3f5570; direction: ltr; white-space: nowrap; }
.hero-ticker div { font: 600 8px/1 "Manrope", sans-serif; letter-spacing: 2.5px; animation: ticker 28s linear infinite; }
.hero-ticker i { display: inline-block; width: 5px; height: 5px; margin: 0 35px; background: var(--blue); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-35%); } }

/* Facts */
.company-strip { background: #fff; border-bottom: 1px solid var(--line); }
.company-facts { min-height: 112px; display: grid; grid-template-columns: repeat(4,1fr); }
.fact { display: flex; align-items: center; gap: 16px; padding: 20px 25px; border-left: 1px solid var(--line); }
.fact:first-child { padding-right: 0; }.fact:last-child { border: 0; }
.fact > span { color: var(--blue); font: 700 9px/1 "Manrope", sans-serif; }
.fact div { display: grid; gap: 5px; }.fact strong { font-size: 14px; }.fact small { color: var(--muted); font-size: 9px; }
.fact-signal { direction: ltr; }.fact-signal > i { width: 36px; height: 36px; border: 1px solid #c9f0e4; position: relative; }
.fact-signal > i::before { content: ""; width: 8px; height: 8px; position: absolute; inset: 0; margin: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(34,201,149,.10); }
.fact-signal strong { font: 700 12px "Manrope", sans-serif; letter-spacing: 1px; color: var(--green); }

/* Sections */
.section { padding: 120px 0; }
.section-head { margin-bottom: 55px; display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 70px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font: 700 9px/1 "Manrope", "Tajawal", sans-serif; letter-spacing: 1.5px; }
.kicker i { width: 24px; height: 1px; background: currentColor; }
.section h2 { margin: 17px 0 0; color: var(--ink); font-size: clamp(40px, 5vw, 63px); line-height: 1.15; letter-spacing: -2px; }
.section h2 em { color: var(--blue); font-style: normal; }
.section-intro { border-top: 1px solid var(--line); padding-top: 17px; }
.section-intro > span { color: #a0adbd; font: 700 8px/1 "Manrope", sans-serif; letter-spacing: 1.2px; }
.section-intro p { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.9; }

/* Capabilities */
.capability-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-auto-rows: minmax(270px, auto); border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.capability { min-height: 285px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; position: relative; overflow: hidden; }
.capability::after { content: ""; position: absolute; width: 135px; height: 135px; left: -90px; bottom: -90px; border: 1px solid #e8edf3; transform: rotate(45deg); }
.capability-wide { grid-row: span 2; min-height: 570px; background: #f5f8fc; }
.capability-dark { grid-column: span 2; color: #fff; background: var(--night-2); border-color: var(--night-2); }
.capability-top { display: flex; justify-content: space-between; align-items: flex-start; }
.capability-no { color: #9aa8b8; font: 700 8px/1 "Manrope", sans-serif; }
.capability-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); border: 1px solid #ccd8e8; background: #fff; font-size: 19px; }
.capability-dark .capability-icon { color: var(--cyan); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.capability-tag { color: var(--blue); font: 700 7px/1 "Manrope", sans-serif; letter-spacing: 1.5px; }
.capability-dark .capability-tag { color: var(--cyan); }
.capability h3 { margin: 12px 0 10px; font-size: 25px; }
.capability p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.capability-dark p { color: #8295af; }
.tech-line { display: flex; align-items: center; color: #90a1b5; font: 600 7px "Manrope", sans-serif; letter-spacing: 1px; }
.tech-line i { flex: 1; height: 1px; margin: 0 10px; background: #d9e1eb; }
.data-bars { height: 82px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.10); }
.data-bars i { flex: 1; background: linear-gradient(to top, var(--blue), var(--cyan)); opacity: .7; }
.data-bars i:nth-child(1) { height: 28%; }.data-bars i:nth-child(2) { height: 58%; }.data-bars i:nth-child(3) { height: 43%; }.data-bars i:nth-child(4) { height: 82%; }.data-bars i:nth-child(5) { height: 67%; }.data-bars i:nth-child(6) { height: 100%; }

/* Products */
.projects-section { color: #fff; background: var(--night); position: relative; overflow: hidden; }
.projects-section::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(100,140,193,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(100,140,193,.08) 1px, transparent 1px); background-size: 70px 70px; }
.projects-section .container { position: relative; z-index: 1; }.projects-section h2 { color: #fff; }.projects-section h2 em { color: var(--cyan); }.kicker-light { color: var(--cyan); }.section-intro-light { border-color: rgba(255,255,255,.12); }.section-intro-light p { color: #8fa1ba; }
.product-list { border-top: 1px solid rgba(255,255,255,.14); }
.product-row { min-height: 260px; display: grid; grid-template-columns: 65px 145px 1fr 140px; align-items: center; gap: 28px; border-bottom: 1px solid rgba(255,255,255,.13); position: relative; }
.product-row::before { content: ""; position: absolute; top: 0; bottom: 0; right: -50vw; left: -50vw; z-index: -1; background: rgba(37,99,255,0); transition: .35s; }
.product-row:hover::before { background: rgba(37,99,255,.055); }
.product-index { align-self: stretch; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.11); color: #536983; font: 700 9px "Manrope", sans-serif; }
.product-symbol { width: 110px; height: 110px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.025); }
.product-symbol span { font: 800 44px "Manrope", sans-serif; color: #fff; }
.product-symbol i { position: absolute; width: 7px; height: 7px; right: 11px; top: 11px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.product-chef .product-symbol i { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.product-content > span { color: #5f7795; font: 700 7px "Manrope", sans-serif; letter-spacing: 1.5px; }
.product-content h3 { margin: 9px 0; font-size: 32px; }.product-content h3 span { color: var(--orange); }
.product-content p { margin: 0; max-width: 600px; color: #8da0ba; font-size: 12px; line-height: 1.8; }
.product-features { display: flex; gap: 7px; margin-top: 17px; }.product-features b { padding: 6px 10px; color: #8da0ba; border: 1px solid rgba(255,255,255,.10); font-size: 8px; font-weight: 500; }
.product-link { width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 23px; }
.product-link span { color: #8ea1ba; font-size: 9px; }.product-link:hover { color: var(--cyan); border-color: rgba(54,214,255,.55); background: rgba(54,214,255,.04); }.product-chef .product-link:hover { color: var(--orange); border-color: rgba(255,122,26,.55); background: rgba(255,122,26,.04); }

/* About */
.about-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 88px; }
.about-blueprint { min-height: 510px; position: relative; display: grid; place-items: center; overflow: hidden; background: #f3f7fc; border: 1px solid var(--line); }
.blueprint-grid { position: absolute; inset: 0; background-image: linear-gradient(#dce6f1 1px, transparent 1px), linear-gradient(90deg, #dce6f1 1px, transparent 1px); background-size: 35px 35px; }
.blueprint-grid::before, .blueprint-grid::after { content: ""; position: absolute; inset: 70px; border: 1px solid rgba(37,99,255,.16); transform: rotate(45deg); }.blueprint-grid::after { inset: 138px; border-color: rgba(37,99,255,.28); }
.blueprint-word { position: relative; color: var(--night); font: 800 clamp(74px, 10vw, 125px)/1 "Manrope", sans-serif; letter-spacing: 15px; text-shadow: 12px 12px 0 rgba(37,99,255,.08); }
.blueprint-word::after { content: ""; position: absolute; width: 11px; height: 11px; right: -15px; top: -3px; background: var(--orange); }
.blueprint-axis { position: absolute; color: #7890ac; font: 600 6px "Manrope", sans-serif; letter-spacing: 2px; }.axis-x { bottom: 22px; right: 25px; }.axis-y { left: -40px; top: 50%; transform: rotate(-90deg); }
.blueprint-corner { position: absolute; width: 25px; height: 25px; border-color: var(--blue); }.c1 { right: 13px; top: 13px; border-right: 1px solid; border-top: 1px solid; }.c2 { left: 13px; top: 13px; border-left: 1px solid; border-top: 1px solid; }.c3 { right: 13px; bottom: 13px; border-right: 1px solid; border-bottom: 1px solid; }.c4 { left: 13px; bottom: 13px; border-left: 1px solid; border-bottom: 1px solid; }
.about-copy > p { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 2.1; }
.principles { margin-top: 36px; border-top: 1px solid var(--line); }.principle { min-height: 80px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }.principle > span { color: var(--blue); font: 700 9px "Manrope", sans-serif; }.principle div { display: grid; gap: 6px; }.principle strong { font-size: 14px; }.principle small { color: var(--muted); font-size: 10px; }

/* Contact */
#contact { padding-top: 25px; }
.contact-panel { min-height: 410px; position: relative; overflow: hidden; display: grid; grid-template-columns: 110px 1fr 300px; align-items: center; gap: 55px; padding: 55px; color: #fff; background: linear-gradient(120deg, #102b54, #0a1729 65%); }
.contact-panel::before { content: ""; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(128,168,220,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(128,168,220,.14) 1px, transparent 1px); background-size: 45px 45px; }.contact-panel::after { content: "MAN"; position: absolute; left: -25px; bottom: -62px; color: rgba(255,255,255,.025); font: 800 210px/1 "Manrope", sans-serif; letter-spacing: 18px; }
.contact-panel > * { position: relative; z-index: 1; }.contact-code { align-self: stretch; display: flex; align-items: center; justify-content: center; color: #4f6b8d; border-left: 1px solid rgba(255,255,255,.12); font: 700 8px "Manrope", sans-serif; writing-mode: vertical-rl; letter-spacing: 2px; }.contact-copy h2 { margin-top: 14px; color: #fff; }.contact-copy h2 em { color: var(--cyan); }.contact-copy p { max-width: 620px; color: #92a6c0; font-size: 13px; line-height: 1.9; }
.contact-action { display: grid; gap: 14px; }.contact-button { width: 100%; min-height: 78px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: #fff; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.045); font-weight: 700; }.contact-button b { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 18px; }.contact-button:hover { border-color: var(--cyan); background: rgba(54,214,255,.05); }.contact-action small { display: flex; align-items: center; gap: 8px; color: #7188a5; font-size: 9px; }.contact-action small i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

/* Footer */
.footer { padding: 70px 0 25px; color: #8091a8; background: #050d18; }.footer-grid { display: grid; grid-template-columns: 1.35fr .75fr .75fr; gap: 70px; padding-bottom: 52px; }.brand-footer .brand-mark { border-color: rgba(255,255,255,.16); }.footer p { max-width: 420px; font-size: 11px; line-height: 1.9; }.footer h4 { margin: 0 0 20px; color: #4f6682; font: 700 8px "Manrope", sans-serif; letter-spacing: 1.6px; }.footer a:not(.brand) { display: block; margin: 11px 0; color: #9cadc2; font-size: 11px; }.footer a:hover { color: var(--cyan); }.copyright { padding-top: 23px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.08); color: #3f526a; font: 600 7px "Manrope", sans-serif; letter-spacing: 1.2px; }

/* Live chat */
.chat-fab { width: 62px; height: 62px; position: fixed; left: 25px; bottom: 25px; z-index: 70; border: 1px solid rgba(255,255,255,.20); background: var(--blue); box-shadow: 0 20px 48px rgba(37,99,255,.33); }
.chat-fab:hover { transform: translateY(-4px); background: #3c75ff; }
.chat-fab-lines, .chat-fab-lines::before, .chat-fab-lines::after { content: ""; width: 23px; height: 2px; position: absolute; left: 0; right: 0; margin: auto; background: #fff; }
.chat-fab-lines { top: 29px; }.chat-fab-lines::before { top: -7px; width: 16px; margin-left: 0; }.chat-fab-lines::after { top: 7px; width: 10px; margin-right: 0; }
.chat-fab .online { width: 12px; height: 12px; position: absolute; right: -2px; top: -2px; border-radius: 50%; border: 3px solid #fff; background: var(--green); }
.chat-widget { width: min(390px, calc(100vw - 30px)); height: min(590px, calc(100vh - 125px)); position: fixed; left: 25px; bottom: 96px; z-index: 75; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); border: 1px solid #cfd8e5; background: #fff; box-shadow: 0 32px 95px rgba(7,17,31,.26); transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none; }
.chat-widget.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-widget #chatContent { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.chat-head { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; color: #fff; background: var(--night); border-bottom: 1px solid rgba(255,255,255,.09); }
.chat-brand { width: 38px; }.chat-head > div:nth-child(2) { flex: 1; }.chat-head strong { display: block; font: 700 12px "Manrope", "Tajawal", sans-serif; }.chat-head span:not(.brand-mark) { display: block; margin-top: 4px; color: #8297b2; font-size: 9px; }.chat-head span i { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }.chat-head > button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); color: #fff; background: rgba(255,255,255,.04); font-size: 20px; }
.chat-new { width: 100%; padding: 16px; display: grid; gap: 9px; overflow: auto; background: #f4f7fb; }.chat-welcome { padding: 13px 5px 18px; text-align: center; }.chat-agent { width: 54px; height: 54px; margin: 0 auto 13px; display: grid; place-items: center; color: #fff; background: var(--night); font: 800 22px "Manrope", sans-serif; }.chat-welcome strong { display: block; font-size: 15px; }.chat-welcome p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.input, .textarea, .select { width: 100%; min-height: 44px; padding: 10px 12px; outline: 0; color: var(--ink); border: 1px solid #d7dfe9; background: #fff; }.input:focus, .textarea:focus, .select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37,99,255,.08); }.chat-new textarea { min-height: 82px; resize: vertical; }
.chat-thread { width: 100%; min-height: 0; display: flex; flex-direction: column; }.chat-status { padding: 9px 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.chat-status small { max-width: 190px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.chat-messages { flex: 1; min-height: 0; padding: 14px; overflow: auto; background: #f4f7fb; }
.message { max-width: 82%; padding: 10px 12px; margin: 7px 0; font-size: 12px; line-height: 1.6; }.message p { margin: 0; }.message.mine { margin-right: auto; color: #fff; background: var(--navy); }.message.theirs { margin-left: auto; border: 1px solid var(--line); background: #fff; }.message time { display: block; margin-top: 3px; font-size: 8px; opacity: .55; }.chat-compose { padding: 10px; display: flex; gap: 7px; border-top: 1px solid var(--line); }.chat-compose .input { background: #f7f9fc; }.chat-compose button { width: 45px; border: 0; color: #fff; background: var(--blue); }.chat-closed { padding: 13px; text-align: center; border-top: 1px solid var(--line); }.chat-closed p { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.toast { max-width: 360px; position: fixed; right: 25px; bottom: 25px; z-index: 200; padding: 13px 18px; color: #fff; background: var(--night); box-shadow: var(--shadow); opacity: 0; transform: translateY(15px); pointer-events: none; }.toast.show { opacity: 1; transform: none; }.toast.error { background: #a83939; }

/* Shared admin */
.logo { position: relative; color: var(--ink); font: 800 26px "Manrope", sans-serif; letter-spacing: 8px; }.logo::after { content: ""; width: 5px; height: 5px; position: absolute; left: -2px; top: 0; background: var(--orange); }
.badge { display: inline-flex; padding: 5px 8px; color: #148067; background: #e7f7f2; font-size: 8px; font-weight: 800; }.badge.orange { color: #a95518; background: #fff0e5; }.badge.gray { color: #6e7888; background: #edf1f5; }
.empty { height: 100%; padding: 25px; display: grid; place-content: center; color: var(--muted); text-align: center; }.empty-icon { width: 58px; height: 58px; margin: auto auto 13px; display: grid; place-items: center; color: var(--blue); border: 1px solid #d9e2ee; background: #f1f5fa; font-size: 23px; }
.panel { overflow: hidden; border: 1px solid var(--line); background: #fff; }.panel-head { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.panel-head h3 { margin: 0; font-size: 14px; }.panel-head p { margin: 4px 0; color: var(--muted); font-size: 9px; }
.field { display: grid; gap: 6px; }.field label { color: #5e6a7e; font-size: 10px; font-weight: 700; }.fields { display: grid; gap: 13px; }.full { grid-column: 1/-1; }

/* Admin login */
.admin-page { min-height: 100vh; background: #f2f5f9; }.admin-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: #fff; }.admin-login-art { padding: 70px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: var(--night); }.admin-login-art::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(104,145,198,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(104,145,198,.10) 1px, transparent 1px); background-size: 55px 55px; }.admin-login-art::after { content: "MAN"; position: absolute; left: -30px; bottom: -50px; color: rgba(255,255,255,.035); font: 800 190px "Manrope", sans-serif; letter-spacing: 15px; }.admin-login-art > * { position: relative; z-index: 1; }.admin-login-art .logo { color: #fff; }.admin-login-art h1 { margin: 16px 0; font-size: 55px; line-height: 1.15; }.admin-login-art p { max-width: 560px; color: #95a9c3; line-height: 1.9; }.admin-login-form { padding: 35px; display: grid; place-items: center; }.login-card { width: min(410px, 100%); }.login-card .logo { display: inline-block; margin-bottom: 45px; }.login-card h2 { margin: 0 0 8px; font-size: 31px; }.login-card > p { margin-bottom: 27px; color: var(--muted); font-size: 12px; }.login-card .btn { width: 100%; margin-top: 6px; }

/* Admin shell */
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }.admin-side { width: 240px; position: fixed; inset: 0 0 0 auto; z-index: 50; padding: 24px 16px; display: flex; flex-direction: column; color: #9eafc5; background: var(--night); }.admin-side .logo { padding: 0 12px 24px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.09); }.admin-side small.brand-sub { display: block; margin-top: 7px; color: #536984; font: 600 6px "Manrope", sans-serif; letter-spacing: 1.5px; }.side-nav { margin-top: 23px; display: grid; gap: 5px; }.side-nav button { padding: 12px; display: flex; align-items: center; gap: 9px; color: #9dadc3; border: 0; border-right: 2px solid transparent; background: transparent; text-align: right; font-size: 12px; }.side-nav button:hover, .side-nav button.active { color: #fff; background: rgba(255,255,255,.06); }.side-nav button.active { border-right-color: var(--cyan); }.side-nav-link { padding: 12px; color: #9dadc3; font-size: 12px; }.side-nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }.side-user { margin-top: auto; padding: 17px 5px 0; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.09); }.side-user .avatar { width: 37px; height: 37px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.05); }.side-user strong { display: block; color: #fff; font-size: 11px; }.side-user small { color: #71849e; font-size: 8px; }.side-user button { margin-right: auto; color: #9dacbf; border: 0; background: transparent; font-size: 18px; }
.admin-main { min-width: 0; grid-column: 2; padding: 0 26px 35px; }.admin-top { height: 70px; margin: 0 -26px 26px; padding: 0 26px; position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e6ee; background: rgba(242,245,249,.92); backdrop-filter: blur(15px); }.admin-top h1 { margin: 0; font-size: 15px; }.admin-top p { margin: 4px 0; color: var(--muted); font-size: 9px; }.top-tools { display: flex; gap: 8px; }.icon-btn { width: 42px; height: 42px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; }.mobile-admin-menu { display: none; }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }.admin-metric { padding: 18px; border: 1px solid var(--line); background: #fff; }.admin-metric span { color: var(--muted); font-size: 10px; }.admin-metric strong { display: block; margin-top: 8px; font-size: 27px; }.admin-metric i { width: 42px; height: 42px; float: left; display: grid; place-items: center; color: var(--blue); border: 1px solid #dbe5f1; background: #f2f6fb; font-style: normal; }.admin-grid { margin-top: 16px; display: grid; grid-template-columns: 370px 1fr; gap: 16px; }
.conversation-list { height: 620px; overflow: auto; }.conversation { padding: 14px 16px; position: relative; cursor: pointer; border-bottom: 1px solid #edf0f4; }.conversation:hover, .conversation.active { background: #f4f7fb; }.conversation.active { border-right: 3px solid var(--blue); }.conversation-top { display: flex; justify-content: space-between; gap: 8px; }.conversation strong { font-size: 12px; }.conversation time { color: var(--muted); font-size: 8px; }.conversation p { margin: 6px 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.unread { min-width: 20px; height: 20px; position: absolute; left: 14px; bottom: 12px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue); font-size: 8px; }
.chat-area { height: 620px; display: flex; flex-direction: column; }.chat-info { padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.chat-info-avatar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blue); border: 1px solid #dce5f1; background: #f1f5fa; font-weight: 800; }.chat-info strong { display: block; font-size: 12px; }.chat-info small { color: var(--muted); font-size: 9px; }.chat-info-actions { margin-right: auto; display: flex; gap: 7px; }.admin-messages { flex: 1; padding: 17px; overflow: auto; background: #f4f7fb; }.admin-compose { padding: 11px; display: flex; gap: 8px; border-top: 1px solid var(--line); }.admin-compose button { min-width: 80px; }
.settings { padding: 22px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.settings textarea { min-height: 110px; resize: vertical; }.table-wrap { overflow: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th { padding: 12px; color: var(--muted); background: #f5f8fb; font-size: 9px; text-align: right; }.data-table td { padding: 13px 12px; border-bottom: 1px solid #edf0f4; font-size: 11px; }.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 15px; display: grid; place-items: center; background: rgba(7,17,31,.68); backdrop-filter: blur(7px); }.modal { width: min(570px,100%); overflow: hidden; background: #fff; box-shadow: 0 35px 100px rgba(7,17,31,.28); }.modal-head { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.modal-head h3 { font-size: 14px; }.modal-head button { width: 36px; height: 36px; border: 1px solid var(--line); background: #f1f5fa; font-size: 20px; }.modal-body { padding: 20px; }

/* Responsive */
@media (max-width: 1050px) {
  .hero-grid { gap: 35px; }
  .system-visual { height: 480px; }.system-stage { height: 378px; }
  .system-node { width: 118px; }.node-payment,.node-operations { left: 12px; }.node-network,.node-data { right: 12px; }
  .capability-grid { grid-template-columns: 1fr 1fr; }.capability-wide { grid-row: auto; min-height: 320px; }.capability-dark { grid-column: span 2; }
  .product-row { grid-template-columns: 50px 120px 1fr 120px; gap: 18px; }
  .contact-panel { grid-template-columns: 70px 1fr 250px; gap: 35px; padding: 40px; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 32px, 1180px); }
  .nav-links { display: none; }.nav-inner { gap: 12px; }.workspace-link { display: none; }
  .hero { min-height: auto; padding: 135px 0 72px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero h1 { max-width: 720px; margin-right: auto; margin-left: auto; }.hero-copy > p { margin: auto; }.hero-actions { justify-content: center; }.trust-row { margin-right: auto; margin-left: auto; text-align: right; }
  .system-visual { width: min(560px,100%); margin: 15px auto 0; }
  .company-facts { grid-template-columns: 1fr 1fr; }.fact:nth-child(2) { border-left: 0; }.fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section { padding: 90px 0; }.section-head { grid-template-columns: 1fr; gap: 28px; }
  .product-row { padding: 28px 0; grid-template-columns: 45px 100px 1fr; }.product-link { width: 100%; height: 48px; grid-column: 2/-1; flex-direction: row; }.product-symbol { width: 88px; height: 88px; }.product-symbol span { font-size: 34px; }
  .about-grid { grid-template-columns: 1fr; gap: 55px; }.about-blueprint { min-height: 420px; }
  .contact-panel { grid-template-columns: 1fr; gap: 28px; }.contact-code { display: block; border: 0; writing-mode: initial; }.contact-action { width: min(350px,100%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > div:first-child { grid-column: 1/-1; }
  .admin-grid { grid-template-columns: 310px 1fr; }.metrics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 24px,1180px); }
  .nav { height: 72px; }.brand-copy strong { font-size: 21px; }.brand-copy small { font-size: 5px; }.brand-mark { width: 34px; height: 34px; padding: 7px; }.nav-actions .btn { min-height: 40px; padding: 0 12px; font-size: 10px; }
  .hero { padding-top: 112px; }.eyebrow { max-width: 100%; font-size: 7px; letter-spacing: .8px; }.hero h1 { margin-top: 24px; font-size: 45px; letter-spacing: -2px; }.hero h1 span { white-space: normal; }.hero h1 span::after { width: 7px; height: 7px; }.hero-copy > p { font-size: 13px; line-height: 1.9; }.hero-actions { flex-direction: column; }.hero-actions .btn { width: 100%; }.trust-row { gap: 0; margin-top: 38px; }.trust-row > div { padding: 0 8px; gap: 6px; }.trust-row span { font-size: 8px; }
  .system-visual { height: 400px; padding: 12px; }.system-stage { height: 310px; }.radar-a { width: 245px; height: 245px; }.radar-b { width: 175px; height: 175px; }.system-core { width: 105px; height: 105px; }.system-core strong { font-size: 21px; }.system-node { width: 93px; min-height: 48px; padding: 7px; gap: 5px; }.system-node > span { width: 25px; height: 25px; }.system-node small { font-size: 4px; }.system-node strong { font-size: 8px; }.node-payment,.node-network { top: 35px; }.node-operations,.node-data { bottom: 28px; }.node-payment,.node-operations { left: 3px; }.node-network,.node-data { right: 3px; }
  .company-facts { grid-template-columns: 1fr; }.fact { min-height: 82px; padding: 15px 0; border-left: 0; border-bottom: 1px solid var(--line); }.fact:nth-child(2) { border-bottom: 1px solid var(--line); }
  .section { padding: 72px 0; }.section h2 { font-size: 40px; }.section-intro p { font-size: 12px; }
  .capability-grid { display: block; border-left: 1px solid var(--line); }.capability { min-height: 270px; }.capability-wide { min-height: 330px; }.capability-dark { min-height: 360px; }
  .product-row { grid-template-columns: 40px 75px 1fr; gap: 12px; }.product-index { align-self: stretch; }.product-symbol { width: 68px; height: 68px; }.product-symbol span { font-size: 26px; }.product-content h3 { font-size: 25px; }.product-content > span { font-size: 5px; }.product-content p { font-size: 10px; }.product-features { flex-wrap: wrap; }.product-features b { padding: 4px 7px; font-size: 7px; }.product-link { grid-column: 2/-1; }
  .about-blueprint { min-height: 330px; }.blueprint-word { font-size: 68px; }.about-copy > p { font-size: 13px; }.principle { grid-template-columns: 35px 1fr; }
  #contact { padding-top: 0; }.contact-panel { min-height: 430px; padding: 28px 22px; }.contact-copy h2 { font-size: 38px; }.contact-copy p { font-size: 11px; }.contact-panel::after { font-size: 120px; bottom: -25px; }
  .footer { padding-top: 55px; }.footer-grid { grid-template-columns: 1fr; gap: 30px; }.footer-grid > div:first-child { grid-column: auto; }.copyright { display: grid; gap: 8px; }
  .chat-fab { left: 14px; bottom: 14px; }.chat-widget { left: 6px; bottom: 0; width: calc(100vw - 12px); height: calc(100vh - 75px); }
  .admin-login { grid-template-columns: 1fr; }.admin-login-art { display: none; }.admin-shell { display: block; }.admin-side { width: min(280px,85vw); transform: translateX(100%); }.admin-side.open { transform: none; }.admin-main { padding: 0 12px 25px; }.admin-top { height: 62px; margin: 0 -12px 18px; padding: 0 12px; }.mobile-admin-menu { display: grid; }.metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.admin-metric { padding: 13px; }.admin-metric strong { font-size: 21px; }.admin-grid { display: block; }.conversation-list { height: 340px; }.chat-area { height: 560px; margin-top: 10px; }.form-grid { grid-template-columns: 1fr; }.full { grid-column: auto; }.chat-info { align-items: flex-start; flex-wrap: wrap; }.chat-info-actions { width: 100%; margin: 8px 0 0; }.toast { right: 12px; left: 12px; bottom: 80px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* MAN corporate digital-infrastructure concept */
.corp-page {
  --corp-bg: #07111a;
  --corp-bg-2: #0a1620;
  --corp-panel: rgba(8, 22, 32, .86);
  --corp-line: rgba(143, 181, 204, .22);
  --corp-line-soft: rgba(143, 181, 204, .12);
  --corp-text: #f3f7fa;
  --corp-muted: #9aabb7;
  --corp-cyan: #41c8f3;
  min-height: 100vh;
  padding: 18px;
  direction: rtl;
  color: var(--corp-text);
  background:
    radial-gradient(circle at 85% 15%, rgba(38, 132, 177, .11), transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(93, 129, 148, .14), transparent 30%),
    linear-gradient(145deg, #111d25, #061018 45%, #050c12);
  overflow-x: hidden;
}
.corp-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
.corp-header, .corp-main, .corp-edge { width: min(1480px, 100%); margin: auto; position: relative; z-index: 2; }
.corp-header { min-height: 82px; padding: 0 46px; display: grid; grid-template-columns: 180px 1fr 120px; align-items: center; direction: ltr; border: 1px solid var(--corp-line); border-bottom-color: var(--corp-line-soft); border-radius: 10px 10px 0 0; background: rgba(5, 14, 21, .88); box-shadow: 0 28px 80px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.corp-brand { display: inline-flex; align-items: center; justify-self: end; direction: ltr; gap: 11px; }
.corp-brand strong { color: #f5f7f8; font: 800 28px/1 "Manrope", sans-serif; letter-spacing: 3px; }
.corp-emblem { width: 38px; height: 38px; position: relative; display: grid; place-items: center; transform: rotate(30deg); border: 2px solid #fff; border-radius: 9px; }
.corp-emblem::before, .corp-emblem::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 6px; }
.corp-emblem::before { transform: translateX(-6px); }.corp-emblem::after { transform: translateX(6px); }
.corp-emblem i { width: 3px; height: 18px; position: absolute; z-index: 2; background: #fff; border-radius: 2px; }.corp-emblem i:nth-child(1) { transform: rotate(0deg); }.corp-emblem i:nth-child(2) { transform: rotate(60deg); }.corp-emblem i:nth-child(3) { transform: rotate(-60deg); }
.corp-nav { display: flex; align-items: center; justify-content: center; gap: clamp(23px, 3vw, 53px); direction: rtl; }
.corp-nav a, .corp-nav button { min-height: 82px; position: relative; display: flex; align-items: center; color: #b4c0c8; border: 0; background: transparent; font-size: 13px; white-space: nowrap; }
.corp-nav a::after, .corp-nav button::after { content: ""; position: absolute; right: 50%; bottom: 0; left: 50%; height: 2px; background: var(--corp-cyan); transition: .25s; }
.corp-nav a:hover, .corp-nav button:hover, .corp-nav a.active { color: #fff; }.corp-nav a:hover::after, .corp-nav button:hover::after, .corp-nav a.active::after { right: 0; left: 0; box-shadow: 0 0 15px rgba(65,200,243,.6); }
.corp-head-tools { display: flex; align-items: center; justify-self: start; gap: 27px; direction: ltr; }.corp-head-tools > a { color: #d7e0e6; font: 500 11px "Manrope", sans-serif; }.corp-menu { width: 31px; height: 31px; padding: 6px; display: grid; align-content: center; gap: 5px; border: 0; background: transparent; }.corp-menu i { width: 20px; height: 1px; background: #d7e0e6; }.corp-menu i:nth-child(2) { width: 14px; }

.corp-main { border-right: 1px solid var(--corp-line); border-left: 1px solid var(--corp-line); background: var(--corp-bg); box-shadow: 0 35px 100px rgba(0,0,0,.25); }
.corp-hero { min-height: 620px; display: grid; grid-template-columns: 43% 57%; direction: ltr; overflow: hidden; border-bottom: 1px solid var(--corp-line); background: linear-gradient(90deg, #08131d 0%, #0b1822 42%, #07111a 100%); }
.corp-hero-copy { padding: 75px 55px 50px; position: relative; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; direction: rtl; text-align: right; }
.corp-kicker { color: var(--corp-cyan); font: 600 11px/1 "Manrope", sans-serif; letter-spacing: 4.5px; direction: ltr; }
.corp-hero h1 { max-width: 590px; margin: 35px 0 22px; color: #f8fafb; font-size: clamp(49px, 5.4vw, 82px); line-height: 1.23; letter-spacing: -3.5px; font-weight: 700; }
.corp-hero-copy > p { max-width: 570px; margin: 0; color: var(--corp-muted); font-size: 15px; line-height: 2.05; }
.corp-outline-btn { min-width: 180px; min-height: 48px; margin-top: 35px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; color: var(--corp-cyan); border: 1px solid rgba(65,200,243,.65); border-radius: 7px; background: rgba(4,22,32,.35); font-weight: 600; font-size: 13px; box-shadow: inset 0 0 28px rgba(65,200,243,.035); }.corp-outline-btn:hover { color: #fff; border-color: var(--corp-cyan); background: rgba(65,200,243,.08); transform: translateY(-2px); }
.corp-signature { margin-top: auto; display: inline-flex; align-items: center; gap: 16px; direction: ltr; }.corp-signature .large { width: 58px; height: 58px; border-width: 3px; }.corp-signature strong { font: 700 50px/1 "Manrope", sans-serif; letter-spacing: 9px; }
.corp-city { min-height: 620px; position: relative; overflow: hidden; background: #08131b; }
.corp-city::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #08131d 0%, transparent 27%, transparent 82%, rgba(7,17,26,.35)); pointer-events: none; }
.corp-city::after { content: ""; position: absolute; z-index: 3; inset: 0; opacity: .18; background-image: linear-gradient(rgba(92,195,232,.10) 1px, transparent 1px),linear-gradient(90deg,rgba(92,195,232,.10) 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent); pointer-events: none; }
.corp-city img { width: 2050px; height: 1367px; max-width: none; position: absolute; z-index: 1; top: -140px; left: -690px; object-fit: cover; filter: saturate(.88) contrast(1.06) brightness(.85); }
.corp-city-shade { position: absolute; z-index: 2; inset: 0; background: radial-gradient(circle at 52% 54%, rgba(53,160,209,.06), transparent 48%), linear-gradient(0deg, rgba(5,14,21,.26), transparent 40%); pointer-events: none; }
.city-tag { position: absolute; z-index: 5; padding: 7px 12px; color: #ddebf2; border: 1px solid rgba(132,196,222,.46); border-radius: 4px; background: rgba(6,19,28,.82); box-shadow: 0 10px 28px rgba(0,0,0,.28); font: 600 9px "Manrope", sans-serif; direction: ltr; }.city-tag::after { content: ""; width: 28px; height: 1px; position: absolute; top: 50%; background: rgba(95,193,229,.45); }.tag-network { top: 18%; left: 30%; }.tag-network::after { right: -28px; }.tag-cloud { top: 34%; right: 20%; }.tag-cloud::after { left: -28px; }.tag-ai { top: 54%; right: 23%; }.tag-ai::after { left: -28px; }.tag-payment { bottom: 25%; left: 22%; }.tag-payment::after { right: -28px; }

.corp-operations { min-height: 340px; display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; direction: ltr; border-bottom: 1px solid var(--corp-line); background: rgba(5,15,23,.97); }
.corp-cell { min-width: 0; padding: 30px 34px; position: relative; overflow: hidden; direction: rtl; border-left: 1px solid var(--corp-line); }.corp-cell:last-child { border-left: 0; }.corp-cell h2 { margin: 0 0 23px; color: #eef3f6; font-size: 17px; font-weight: 700; }
.corp-cell-head { display: flex; align-items: center; justify-content: space-between; }.corp-cell-head > div { display: flex; gap: 7px; direction: ltr; }.corp-cell-head button { width: 28px; height: 28px; display: grid; place-items: center; color: #dce8ee; border: 1px solid var(--corp-line); border-radius: 4px; background: rgba(255,255,255,.02); }
.corp-project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.corp-project-card { min-height: 235px; padding: 16px; position: relative; border: 1px solid var(--corp-line); border-radius: 7px; background: linear-gradient(145deg,rgba(19,44,58,.75),rgba(5,17,25,.9)); }.corp-project-card h3 { margin: 10px 0 6px; font: 700 16px "Manrope","Tajawal",sans-serif; direction: ltr; text-align: right; }.corp-project-card p { min-height: 42px; margin: 0; color: #9aadb9; font-size: 10px; line-height: 1.8; }.corp-project-card a { position: absolute; right: 16px; bottom: 13px; color: var(--corp-cyan); font-size: 9px; }.project-visual { height: 90px; position: relative; overflow: hidden; border-radius: 5px; background: radial-gradient(circle at 65% 50%,rgba(43,136,178,.26),transparent 45%),#07151f; }.card-visual::before { content: ""; width: 125px; height: 74px; position: absolute; left: 24px; top: 7px; border: 1px solid rgba(118,172,199,.48); border-radius: 7px; background: linear-gradient(135deg,#102c3e,#07121b); transform: rotate(-8deg); box-shadow: 0 17px 35px rgba(0,0,0,.38); }.card-visual::after { content: "•••• •••• ••••"; position: absolute; left: 41px; bottom: 28px; color: rgba(113,190,220,.55); font: 500 5px "Manrope",sans-serif; letter-spacing: 2px; transform: rotate(-8deg); }.card-visual b { position: absolute; left: 44px; top: 24px; z-index: 2; font: 700 9px "Manrope",sans-serif; transform: rotate(-8deg); }.mini-chip { width: 17px; height: 13px; position: absolute; z-index: 3; left: 45px; bottom: 22px; border: 1px solid #657d89; border-radius: 2px; background: #b0b7a8; transform: rotate(-8deg); }.chef-visual { display: flex; align-items: flex-end; justify-content: center; gap: 8px; perspective: 200px; }.chef-visual::before { content: ""; width: 110px; height: 63px; position: absolute; bottom: 9px; border: 1px solid rgba(84,167,204,.35); background: linear-gradient(150deg,#0d2736,#07141d); transform: rotateX(52deg) rotateZ(-4deg); box-shadow: 0 0 30px rgba(35,139,184,.16); }.chef-visual i { width: 23px; position: relative; z-index: 2; bottom: 25px; border: 1px solid rgba(70,172,213,.42); background: linear-gradient(to top,rgba(31,134,177,.5),rgba(64,200,243,.12)); }.chef-visual i:nth-child(1) { height: 24px; }.chef-visual i:nth-child(2) { height: 45px; }.chef-visual i:nth-child(3) { height: 33px; }
.corp-capabilities ul { margin: 0; padding: 0; list-style: none; }.corp-capabilities li { min-height: 42px; display: flex; align-items: center; gap: 10px; color: #c3cfd6; border-bottom: 1px solid var(--corp-line-soft); font-size: 10px; }.corp-capabilities li span { width: 25px; color: #e4edf1; font-size: 15px; }
.corp-status > p { padding-bottom: 16px; color: #bac6cc; border-bottom: 1px solid var(--corp-line-soft); font-size: 10px; }.corp-status > p i { width: 8px; height: 8px; margin-left: 8px; display: inline-block; border-radius: 50%; background: #44d593; box-shadow: 0 0 11px rgba(68,213,147,.55); }.corp-status dl { margin: 0; }.corp-status dl div { min-height: 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--corp-line-soft); }.corp-status dt { margin: 0; color: #aebcc5; font-size: 9px; font-weight: 500; }.corp-status dd { margin: 0; color: #44d593; font-size: 9px; }
.corp-contact { display: flex; flex-direction: column; align-items: flex-start; }.corp-contact > p { margin: 0 0 22px; color: #c1ccd2; font-size: 13px; line-height: 1.8; }.corp-contact > button { min-width: 140px; min-height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #eef8fb; border: 1px solid rgba(102,188,222,.35); border-radius: 6px; background: rgba(255,255,255,.025); }.corp-contact > button:hover { color: var(--corp-cyan); border-color: var(--corp-cyan); }.corp-contact > a { margin-top: 9px; position: relative; z-index: 2; color: #78909f; font-size: 8px; }.contact-orbit { width: 230px; height: 230px; position: absolute; left: -65px; bottom: -115px; border: 1px solid rgba(88,165,198,.20); border-radius: 50%; box-shadow: 0 0 0 24px rgba(63,145,179,.03),0 0 0 55px rgba(63,145,179,.02); }.contact-orbit::before,.contact-orbit::after { content: ""; position: absolute; inset: 37px; border: 1px solid rgba(68,181,224,.17); border-radius: 50%; }.contact-orbit::after { inset: 80px; background: radial-gradient(circle,rgba(57,181,225,.16),transparent 70%); }
.corp-edge { min-height: 35px; padding: 12px 2px 0; color: rgba(149,175,191,.38); font: 500 7px "Manrope",sans-serif; letter-spacing: 2px; direction: ltr; }
.corp-page ~ .chat-fab { width: 54px; height: 54px; left: 28px; bottom: 26px; border: 1px solid rgba(96,185,220,.44); border-radius: 6px; background: #0b2735; box-shadow: 0 16px 42px rgba(0,0,0,.35); }

@media (max-width: 1120px) {
  .corp-header { padding: 0 25px; grid-template-columns: 155px 1fr 85px; }.corp-nav { gap: 20px; }.corp-nav a,.corp-nav button { font-size: 11px; }
  .corp-hero { grid-template-columns: 47% 53%; }.corp-hero-copy { padding: 60px 34px 42px; }.corp-city img { left: -760px; }
  .corp-operations { grid-template-columns: 1.8fr 1fr 1fr; }.corp-contact { grid-column: 1/-1; min-height: 180px; border-top: 1px solid var(--corp-line); }.contact-orbit { bottom: -145px; }
}
@media (max-width: 820px) {
  .corp-page { padding: 0; }.corp-header { min-height: 70px; position: absolute; inset: 0 0 auto; z-index: 20; grid-template-columns: 1fr auto; border: 0; border-bottom: 1px solid var(--corp-line); border-radius: 0; background: rgba(5,15,23,.55); }.corp-brand { grid-column: 2; }.corp-brand strong { font-size: 20px; }.corp-emblem { width: 30px; height: 30px; }.corp-emblem::before,.corp-emblem::after { width: 17px; height: 17px; }.corp-emblem i { height: 14px; }.corp-nav { display: none; position: absolute; top: 70px; right: 12px; left: 12px; padding: 10px; background: rgba(5,15,23,.98); border: 1px solid var(--corp-line); }.corp-nav.open { display: grid; }.corp-nav a,.corp-nav button { min-height: 43px; padding: 0 12px; }.corp-head-tools { grid-column: 1; grid-row: 1; }.corp-head-tools > a { display: none; }
  .corp-main { border: 0; }.corp-hero { min-height: 780px; padding-top: 70px; grid-template-columns: 1fr; }.corp-city { min-height: 420px; grid-row: 2; }.corp-city img { width: 1650px; height: 1100px; top: -112px; left: -545px; }.corp-hero-copy { min-height: 360px; grid-row: 1; padding: 38px 25px 30px; text-align: center; align-items: center; }.corp-kicker { font-size: 8px; letter-spacing: 3px; }.corp-hero h1 { max-width: 620px; margin: 20px 0 13px; font-size: 43px; letter-spacing: -2px; }.corp-hero-copy > p { font-size: 12px; }.corp-outline-btn { margin-top: 23px; }.corp-signature { display: none; }
  .corp-operations { grid-template-columns: 1fr 1fr; }.corp-projects { grid-column: 1/-1; }.corp-cell { border-bottom: 1px solid var(--corp-line); }.corp-contact { grid-column: 1/-1; }
}
@media (max-width: 560px) {
  .corp-header { padding: 0 17px; }.corp-city { min-height: 365px; }.corp-city img { width: 1450px; height: 967px; top: -100px; left: -490px; }.city-tag { padding: 5px 8px; font-size: 6px; }.tag-network { left: 16%; }.tag-cloud { right: 9%; }.tag-ai { right: 15%; }.tag-payment { left: 12%; }
  .corp-hero { min-height: 720px; }.corp-hero-copy { min-height: 355px; padding: 32px 20px 25px; }.corp-hero h1 { font-size: 36px; line-height: 1.27; }.corp-hero-copy > p { font-size: 11px; line-height: 1.9; }.corp-outline-btn { width: 100%; }
  .corp-operations { display: block; }.corp-cell { padding: 25px 20px; border-left: 0; }.corp-project-grid { grid-template-columns: 1fr; }.corp-project-card { min-height: 245px; }.project-visual { height: 105px; }.corp-capabilities,.corp-status { min-height: 320px; }.corp-contact { min-height: 245px; }
  .corp-page ~ .chat-fab { left: 14px; bottom: 14px; }
}

/* Final selected direction: light MAN engineering identity */
.corp-page {
  padding: 20px;
  color: #071a38;
  background: linear-gradient(145deg,#eef2f7,#f9fbfd 48%,#e9eef4);
}
.corp-page::before { opacity: .38; background-image: linear-gradient(rgba(29,93,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(29,93,210,.045) 1px,transparent 1px); background-size: 54px 54px; }
.corp-header { min-height: 72px; padding: 0 37px; grid-template-columns: 190px 1fr 115px; direction: rtl; border-color: #cbd5e2; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 14px 45px rgba(11,39,79,.08); }
.corp-brand { direction: ltr; }.corp-brand strong { color: #061832; font-size: 27px; letter-spacing: 2px; }.corp-brand .corp-emblem { border-color: #1261e9; }.corp-brand .corp-emblem::before,.corp-brand .corp-emblem::after { border-color: #1261e9; }.corp-brand .corp-emblem i { background: #1261e9; }
.corp-brand > span:last-child { display: grid; gap: 3px; }.corp-brand small { color: #071a38; font: 800 5px/1 "Manrope",sans-serif; letter-spacing: 1px; }
.man-mark { width: 39px; height: 39px; display: block; overflow: visible; fill: #175de8; }
.corp-nav { gap: clamp(21px,2.7vw,46px); }.corp-nav a,.corp-nav button { min-height: 72px; color: #24344d; font-size: 12px; }.corp-nav a:hover,.corp-nav button:hover,.corp-nav a.active { color: #071a38; }.corp-nav a::after,.corp-nav button::after { background: #1261e9; box-shadow: none !important; }
.corp-head-tools { direction: ltr; }.corp-head-tools > a { color: #142743; }.corp-search { width: 32px; height: 32px; padding: 4px; display: grid; place-items: center; border: 0; background: transparent; }.corp-search svg { width: 19px; fill: none; stroke: #142743; stroke-width: 1.6; stroke-linecap: round; }.corp-menu { display: none; }.corp-menu i { background: #142743; }
.corp-main { border-color: #cbd5e2; background: #fff; box-shadow: 0 28px 80px rgba(12,42,84,.08); }

.light-hero { min-height: 440px; display: grid; grid-template-columns: 48% 52%; direction: ltr; overflow: hidden; position: relative; border-bottom: 1px solid #cad6e4; background: #fff; }
.light-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .36; background-image: linear-gradient(rgba(25,96,217,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(25,96,217,.12) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg,#000,transparent 44%,#000); }
.light-hero-copy { padding: 50px 45px 40px 155px; position: relative; z-index: 3; direction: ltr; text-align: left; }
.light-wordmark { display: grid; justify-items: start; }.light-wordmark strong { color: #061832; font: 800 clamp(84px,10vw,155px)/.82 "Manrope",sans-serif; letter-spacing: 4px; }.light-wordmark span { margin-top: 22px; color: #1459dc; font: 700 23px/1 "Manrope",sans-serif; letter-spacing: 8px; }
.light-hero-copy h1 { max-width: 550px; margin: 30px 0 12px; direction: rtl; color: #071a38; font-size: clamp(25px,2.4vw,39px); line-height: 1.35; letter-spacing: -.7px; }.light-hero-copy > i { width: 65px; height: 3px; display: block; background: #ff6b19; }.light-hero-copy > p { max-width: 590px; margin: 16px 0 0; direction: rtl; color: #7d899b; font-size: 11px; line-height: 1.9; text-align: left; }
.light-blueprint { min-height: 440px; position: relative; overflow: hidden; background: #fff; }.light-blueprint img { width: 2765px; height: 1843px; max-width: none; position: absolute; top: -125px; left: -1060px; filter: saturate(.87) contrast(1.03) brightness(1.05); }.blueprint-wash { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.1),transparent 45%),linear-gradient(0deg,#fff 0%,transparent 24%); }

.light-capabilities { min-height: 190px; padding: 0 35px; display: grid; grid-template-columns: 1fr 1fr 145px 1fr 1fr; direction: ltr; align-items: center; position: relative; border-bottom: 1px solid #cad6e4; background: #fff; }.light-capabilities::before { content: ""; height: 1px; position: absolute; right: 9%; left: 9%; top: 50%; z-index: 0; background: #9cbcf1; }.light-capability { min-height: 150px; padding: 26px 22px 20px; position: relative; z-index: 2; direction: rtl; text-align: right; border-right: 1px solid #e0e7f0; background: rgba(255,255,255,.96); }.light-capability:first-child { border-left: 1px solid #e0e7f0; }.line-icon { width: 50px; height: 50px; float: left; display: grid; place-items: center; color: #1261e9; background: #fff; }.line-icon svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.light-capability h2 { margin: 5px 0 12px; color: #071a38; font-size: 16px; }.light-capability h2 small { margin-top: 6px; display: block; color: #1459dc; font: 700 7px "Manrope",sans-serif; letter-spacing: 1px; }.light-capability p { max-width: 175px; margin: 0; color: #6f7f94; font-size: 9px; line-height: 1.8; }.light-core { width: 104px; height: 104px; margin: auto; position: relative; z-index: 3; display: grid; place-items: center; border: 1px solid #9ebff5; border-radius: 50%; background: #fff; box-shadow: 0 0 0 15px rgba(18,97,233,.035); }.light-core::before,.light-core::after { content: ""; width: 12px; height: 12px; position: absolute; border-radius: 50%; border: 1px solid #1261e9; background: #fff; }.light-core::before { left: -24px; }.light-core::after { right: -24px; }.light-core .man-mark { width: 46px; height: 46px; }.light-core b { width: 180px; position: absolute; top: -30px; color: #1459dc; font-size: 9px; text-align: center; }

.light-projects { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-bottom: 1px solid #cad6e4; background: #fff; }.light-project-card { min-height: 250px; padding: 33px 36px; display: grid; grid-template-columns: 1fr 1.05fr; direction: ltr; align-items: center; overflow: hidden; position: relative; border: 1px solid #d5dfeb; border-radius: 8px; background: linear-gradient(135deg,#f9fbfd,#eef4fa); }.light-project-card::before { content: ""; position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(25,96,217,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,96,217,.07) 1px,transparent 1px); background-size: 35px 35px; }.light-project-copy { position: relative; z-index: 2; direction: rtl; text-align: left; }.light-project-copy h2 { margin: 0 0 12px; direction: ltr; color: #071a38; font: 700 27px "Manrope",sans-serif; text-align: left; }.light-project-copy p { max-width: 290px; margin: 0; color: #65758a; font-size: 12px; line-height: 1.8; text-align: left; }.light-project-copy a { margin-top: 26px; display: inline-block; color: #1459dc; font-size: 10px; }
.light-card-art { min-height: 170px; position: relative; z-index: 2; display: grid; place-items: center; }.light-card-art::before { content: ""; width: 190px; height: 32px; position: absolute; bottom: 17px; border-radius: 50%; background: radial-gradient(ellipse,rgba(18,68,137,.25),transparent 68%); filter: blur(9px); }.light-card-art > div { width: 200px; height: 122px; padding: 20px; position: relative; color: #fff; border: 1px solid #174f9f; border-radius: 12px; background: linear-gradient(140deg,#061934,#0c376e); box-shadow: 0 25px 45px rgba(7,40,88,.28); transform: perspective(700px) rotateY(-13deg) rotateX(4deg); }.light-card-art b { font: 700 13px "Manrope",sans-serif; letter-spacing: 1px; }.light-card-art span { width: 26px; height: 20px; position: absolute; left: 21px; top: 49px; border: 1px solid #c5cfcd; border-radius: 3px; background: #cfd5c6; }.light-card-art i { width: 72px; height: 43px; position: absolute; right: 17px; bottom: 15px; background-image: radial-gradient(#3386e8 1px,transparent 1px); background-size: 7px 7px; }
.light-screen-art { width: 255px; height: 155px; padding: 16px; position: relative; z-index: 2; justify-self: center; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 18px 48px 1fr; gap: 7px; border: 8px solid #0a2956; border-radius: 9px; background: #fff; box-shadow: 0 24px 40px rgba(7,42,91,.22); transform: perspective(700px) rotateY(10deg); }.screen-head { grid-column: 1/-1; border-bottom: 1px solid #d9e6f5; background: linear-gradient(90deg,#1a69dd 14%,#eff5fb 14%); }.light-screen-art span { border: 1px solid #d9e6f5; background: linear-gradient(140deg,#f2f7fc,#fff); }.light-screen-art i { position: relative; border-top: 3px solid #1b68dc; background: repeating-linear-gradient(90deg,#d7e5f7 0 4px,transparent 4px 9px); }

.light-support { min-height: 125px; margin: 16px; display: grid; grid-template-columns: 1.35fr repeat(3,.72fr); align-items: stretch; border: 1px solid #b8cbea; border-radius: 8px; background: linear-gradient(120deg,#f6faff,#fff); }.support-intro { padding: 22px 30px; display: flex; align-items: center; gap: 20px; }.support-orbit { width: 65px; height: 65px; display: grid; place-items: center; color: #1261e9; border: 1px solid #9fbcf0; border-radius: 50%; box-shadow: 0 0 0 11px rgba(18,97,233,.04); }.support-orbit svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.support-intro h2 { margin: 0 0 7px; color: #071a38; font-size: 20px; }.support-intro p { margin: 0; color: #69798e; font-size: 10px; line-height: 1.7; }.light-support > a,.light-support > button { padding: 18px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #071a38; border: 0; border-right: 1px solid #d5e0ed; background: transparent; }.light-support > a:hover,.light-support > button:hover { background: #edf5ff; }.light-support > * b { color: #1261e9; font-size: 22px; }.light-support > * span { display: grid; gap: 5px; font-size: 11px; font-weight: 700; text-align: right; }.light-support > * small { color: #77879b; font: 500 8px "Manrope","Tajawal",sans-serif; }.support-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #9fbcf0; border-radius: 50%; font-size: 15px !important; }.chat-dots { padding-bottom: 6px; font: 800 14px/1 sans-serif; letter-spacing: 1px; }
.light-footer { min-height: 78px; padding: 0 32px; display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; border-top: 1px solid #e1e7ee; background: #fff; }.light-footer .corp-brand { justify-self: start; }.light-footer .corp-emblem { width: 30px; height: 30px; }.light-footer .corp-emblem::before,.light-footer .corp-emblem::after { width: 17px; height: 17px; }.light-footer .corp-emblem i { height: 13px; }.light-footer .corp-brand > span:last-child { display: grid; }.light-footer .corp-brand strong { font-size: 17px; }.light-footer .corp-brand small { margin-top: 4px; color: #1459dc; font: 700 5px "Manrope",sans-serif; letter-spacing: 1px; }.light-footer nav { display: flex; justify-content: center; gap: 28px; }.light-footer nav a { color: #58697d; font-size: 9px; }.light-footer p { margin: 0; color: #7d8b9a; font: 500 7px "Manrope",sans-serif; text-align: right; }
.corp-page ~ .chat-fab { background: #1261e9; border-color: #1261e9; box-shadow: 0 17px 40px rgba(18,97,233,.28); }

@media (max-width: 980px) {
  .corp-header { grid-template-columns: 165px 1fr 75px; padding: 0 22px; }.corp-nav { gap: 17px; }.corp-nav a,.corp-nav button { font-size: 10px; }
  .light-hero-copy { padding-left: 55px; }.light-wordmark strong { font-size: 102px; }.light-wordmark span { font-size: 17px; letter-spacing: 6px; }.light-blueprint img { left: -1180px; }
  .light-capabilities { grid-template-columns: 1fr 1fr 110px 1fr 1fr; padding: 0 16px; }.light-capability { padding-right: 12px; padding-left: 12px; }
  .light-project-card { padding: 25px; }.light-support { grid-template-columns: 1.2fr repeat(3,.8fr); }
}
@media (max-width: 820px) {
  .corp-page { padding: 0; }.corp-header { direction: ltr; grid-template-columns: 1fr auto; }.corp-brand { grid-column: 2; }.corp-head-tools { grid-column: 1; }.corp-search { display: none; }.corp-menu { display: grid; }.corp-nav { top: 70px; direction: rtl; border-color: #cbd7e5; background: #fff; box-shadow: 0 20px 45px rgba(11,39,79,.12); }.corp-nav a,.corp-nav button { color: #142743; }
  .light-hero { padding-top: 70px; grid-template-columns: 1fr; }.light-hero-copy { min-height: 375px; padding: 44px 30px 28px; display: grid; justify-items: start; }.light-wordmark strong { font-size: 105px; }.light-hero-copy h1 { margin-top: 25px; font-size: 31px; text-align: left; }.light-hero-copy > p { display: none; }.light-blueprint { min-height: 330px; }.light-blueprint img { width: 2100px; height: 1400px; top: -95px; left: -815px; }
  .light-capabilities { grid-template-columns: 1fr 1fr; padding: 14px; }.light-capabilities::before { display: none; }.light-core { display: none; }.light-capability { min-height: 140px; border: 1px solid #dce4ee; }.light-capability:first-child { border: 1px solid #dce4ee; }
  .light-project-card { grid-template-columns: 1fr; min-height: 430px; }.light-project-copy { grid-row: 2; }.light-card-art,.light-screen-art { grid-row: 1; }.light-support { grid-template-columns: 1fr 1fr; }.support-intro { grid-column: 1/-1; }.light-footer { grid-template-columns: 1fr 1fr; }.light-footer nav { display: none; }
}
@media (max-width: 560px) {
  .corp-header { padding: 0 14px; }.corp-brand strong { font-size: 20px; }.corp-brand .corp-emblem { width: 28px; height: 28px; }.corp-brand .corp-emblem::before,.corp-brand .corp-emblem::after { width: 16px; height: 16px; }.corp-brand .corp-emblem i { height: 13px; }
  .light-hero-copy { min-height: 320px; padding: 35px 22px 20px; }.light-wordmark strong { font-size: 78px; }.light-wordmark span { margin-top: 15px; font-size: 12px; letter-spacing: 4px; }.light-hero-copy h1 { max-width: 300px; margin-top: 24px; font-size: 27px; }.light-hero-copy > i { width: 45px; }.light-blueprint { min-height: 275px; }.light-blueprint img { width: 1700px; height: 1133px; top: -77px; left: -670px; }
  .light-capabilities { display: block; padding: 12px; }.light-capability { min-height: 125px; margin-bottom: 8px; padding: 21px; }.light-capability p { max-width: 250px; }
  .light-projects { grid-template-columns: 1fr; padding: 12px; }.light-project-card { min-height: 385px; padding: 22px; }.light-project-copy h2 { font-size: 24px; }.light-project-copy p { font-size: 11px; }.light-screen-art { width: 230px; }
  .light-support { margin: 12px; display: block; }.support-intro { padding: 22px 18px; }.light-support > a,.light-support > button { min-height: 76px; justify-content: flex-start; border-top: 1px solid #d5e0ed; border-right: 0; }.light-footer { padding: 0 18px; grid-template-columns: 1fr; }.light-footer .corp-brand { justify-self: center; }.light-footer p { display: none; }
}

/* MAN Online Projects — light platform identity */
.online-page {
  --online-navy: #071a39;
  --online-blue: #1f63ee;
  --online-blue-2: #4588ff;
  --online-orange: #ff6b1a;
  --online-muted: #66778f;
  --online-line: #d9e3f0;
  min-height: 100vh;
  color: var(--online-navy);
  background: #f4f7fb;
  overflow-x: hidden;
}
.online-header {
  width: min(1480px, calc(100% - 40px));
  min-height: 78px;
  margin: 18px auto 0;
  padding: 0 32px;
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  align-items: center;
  direction: rtl;
  border: 1px solid #d4dfec;
  border-radius: 14px 14px 0 0;
  background: rgba(255,255,255,.94);
  box-shadow: 0 15px 50px rgba(15,48,95,.08);
  backdrop-filter: blur(18px);
}
.online-brand { display: inline-flex; align-items: center; justify-self: start; gap: 12px; direction: ltr; }
.online-brand .man-mark { width: 42px; height: 42px; fill: var(--online-blue); filter: drop-shadow(0 8px 12px rgba(31,99,238,.14)); }
.online-brand > span { display: grid; gap: 3px; }
.online-brand strong { color: var(--online-navy); font: 800 27px/1 "Manrope",sans-serif; letter-spacing: 2px; }
.online-brand small { color: #4572c9; font: 800 6px/1 "Manrope",sans-serif; letter-spacing: 1.8px; }
.online-nav { display: flex; align-items: center; justify-content: center; gap: clamp(22px,3vw,50px); }
.online-nav a,.online-nav button { min-height: 78px; padding: 0; position: relative; display: flex; align-items: center; color: #536278; border: 0; background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.online-nav a::after,.online-nav button::after { content: ""; height: 2px; position: absolute; right: 50%; bottom: 0; left: 50%; background: var(--online-blue); transition: .25s ease; }
.online-nav a:hover,.online-nav button:hover,.online-nav .active { color: var(--online-navy); }
.online-nav a:hover::after,.online-nav button:hover::after,.online-nav .active::after { right: 0; left: 0; }
.online-tools { display: flex; align-items: center; justify-self: end; direction: ltr; }
.workspace-entry { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 9px; color: var(--online-navy); border: 1px solid #cbd8e9; border-radius: 7px; background: #fff; font-size: 10px; font-weight: 700; }
.workspace-entry span { width: 7px; height: 7px; border-radius: 50%; background: #24c98b; box-shadow: 0 0 0 5px rgba(36,201,139,.10); }
.workspace-entry:hover { color: var(--online-blue); border-color: #9bbaf2; transform: translateY(-1px); }
.online-menu { width: 40px; height: 40px; padding: 9px; display: none; align-content: center; gap: 5px; border: 1px solid #d4dfec; border-radius: 8px; background: #fff; }
.online-menu i { width: 20px; height: 1px; display: block; background: var(--online-navy); }.online-menu i:nth-child(2) { width: 14px; }

.online-page main { width: min(1480px, calc(100% - 40px)); margin: auto; border: 1px solid #d4dfec; border-top: 0; background: #fff; box-shadow: 0 35px 90px rgba(14,43,85,.09); }
.online-hero { min-height: 735px; position: relative; display: grid; place-items: center; overflow: hidden; text-align: center; background: linear-gradient(180deg,#fff 0%,#f8fbff 72%,#f2f7fd 100%); }
.online-grid-bg { position: absolute; inset: 0; opacity: .56; background-image: linear-gradient(rgba(31,99,238,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,238,.065) 1px,transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 42%,#000 0%,transparent 74%); }
.online-hero-glow { width: 680px; height: 680px; position: absolute; top: -135px; left: calc(50% - 340px); border-radius: 50%; background: radial-gradient(circle,rgba(55,127,255,.20) 0%,rgba(84,147,255,.08) 28%,transparent 68%); filter: blur(2px); animation: onlineGlow 4.5s ease-in-out infinite alternate; }
@keyframes onlineGlow { to { transform: scale(1.12); opacity: .72; } }
.hero-beam { width: 2px; height: 920px; position: absolute; top: -370px; left: 50%; background: linear-gradient(to bottom,transparent,rgba(59,127,255,.42),transparent); box-shadow: 0 0 18px rgba(54,122,255,.30); transform-origin: center; }
.beam-one { transform: rotate(54deg); }.beam-two { transform: rotate(-54deg); opacity: .58; }
.online-hero::before,.online-hero::after { content: ""; width: 510px; height: 510px; position: absolute; top: 100px; left: calc(50% - 255px); border: 1px solid rgba(31,99,238,.10); border-radius: 50%; }
.online-hero::after { width: 390px; height: 390px; top: 160px; left: calc(50% - 195px); border-style: dashed; animation: orbitSpin 38s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.online-hero-content { width: min(760px,calc(100% - 42px)); padding-top: 10px; position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; }
.hero-logo-stage { width: 145px; height: 145px; margin-bottom: 27px; position: relative; display: grid; place-items: center; }
.hero-logo { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid rgba(31,99,238,.18); border-radius: 28px; background: rgba(255,255,255,.86); box-shadow: 0 28px 70px rgba(31,99,238,.22),inset 0 0 32px rgba(31,99,238,.04); backdrop-filter: blur(13px); }
.hero-logo .man-mark { width: 62px; height: 62px; fill: var(--online-blue); filter: drop-shadow(0 10px 15px rgba(31,99,238,.22)); }
.logo-ring { position: absolute; inset: 0; border: 1px solid rgba(31,99,238,.25); border-radius: 39px; transform: rotate(45deg); }.ring-two { inset: -17px; opacity: .35; border-style: dashed; animation: orbitSpin 20s linear infinite reverse; }
.online-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: #4273cc; font: 700 9px/1 "Manrope",sans-serif; letter-spacing: 2.8px; direction: ltr; }.online-eyebrow i { width: 26px; height: 1px; background: var(--online-orange); }
.online-hero h1 { margin: 23px 0 18px; color: var(--online-navy); font-size: clamp(48px,5.8vw,82px); line-height: 1.13; letter-spacing: -3px; font-weight: 800; }
.online-hero h1 span { color: transparent; background: linear-gradient(105deg,#0e53ce,#4a91ff 55%,#1467ef); -webkit-background-clip: text; background-clip: text; }
.online-lead { max-width: 690px; margin: 0; color: var(--online-muted); font-size: 15px; line-height: 2; }
.online-actions { margin-top: 31px; display: flex; align-items: center; gap: 10px; }
.primary-action,.secondary-action { min-height: 50px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.primary-action { color: #fff; background: var(--online-blue); box-shadow: 0 18px 35px rgba(31,99,238,.25); }.primary-action:hover { background: #1456d5; transform: translateY(-2px); }
.secondary-action { color: var(--online-navy); border: 1px solid #c8d6e8; background: rgba(255,255,255,.78); }.secondary-action span { width: 8px; height: 8px; border-radius: 50%; background: #28c991; box-shadow: 0 0 0 5px rgba(40,201,145,.10); }.secondary-action:hover { color: var(--online-blue); border-color: #9dbaf0; }
.hero-status { width: min(450px,100%); margin-top: 38px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; direction: ltr; color: #8b99aa; border-top: 1px solid #dce6f1; font: 600 8px "Manrope","Tajawal",sans-serif; letter-spacing: .4px; }.hero-status span { display: flex; align-items: center; gap: 8px; }.hero-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #24c98b; box-shadow: 0 0 9px rgba(36,201,139,.55); }.hero-status b { color: #6f82a0; letter-spacing: 1.5px; }
.orbit-project { min-width: 138px; min-height: 50px; padding: 8px 12px; position: absolute; z-index: 3; display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 1px 9px; direction: ltr; color: var(--online-navy); border: 1px solid rgba(170,192,222,.68); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: 0 16px 45px rgba(25,67,125,.09); backdrop-filter: blur(10px); font: 700 10px "Manrope",sans-serif; }.orbit-project i { width: 7px; height: 7px; grid-row: 1/3; border-radius: 50%; background: var(--online-blue); box-shadow: 0 0 0 5px rgba(31,99,238,.09); }.orbit-project small { color: #8ba0bb; font-size: 6px; letter-spacing: 1.2px; }.orbit-cards { top: 25%; right: 7%; }.orbit-chef { top: 51%; left: 7%; }.orbit-support { right: 11%; bottom: 15%; }.orbit-support i { background: #24c98b; box-shadow: 0 0 0 5px rgba(36,201,139,.09); }
.scroll-cue { position: absolute; z-index: 5; bottom: 22px; left: 50%; display: grid; justify-items: center; gap: 7px; color: #8292a8; font-size: 8px; transform: translateX(-50%); }.scroll-cue span { width: 1px; height: 25px; background: linear-gradient(to bottom,var(--online-blue),transparent); }

.online-services { min-height: 140px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--online-line); border-bottom: 1px solid var(--online-line); background: #fff; }
.online-services > div { padding: 26px 30px; display: grid; grid-template-columns: 30px 1fr; align-content: center; gap: 6px 13px; border-left: 1px solid var(--online-line); }.online-services > div:last-child { border-left: 0; }
.online-services span { grid-row: 1/3; color: #8fb0e7; font: 700 9px "Manrope",sans-serif; }.online-services b { font-size: 15px; }.online-services small { color: #7c8ba0; font-size: 9px; line-height: 1.65; }

.online-projects { padding: 85px clamp(30px,6vw,90px) 95px; background: linear-gradient(180deg,#f8fafc,#fff); }
.section-heading { margin-bottom: 43px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.section-heading > div > p { margin: 0 0 11px; color: var(--online-blue); font: 700 8px "Manrope",sans-serif; letter-spacing: 2.7px; }.section-heading h2 { margin: 0; font-size: clamp(34px,4vw,54px); letter-spacing: -2px; }.section-heading h2 span { color: var(--online-blue); }.section-heading > p { max-width: 460px; margin: 0; color: var(--online-muted); font-size: 12px; line-height: 1.9; }
.projects-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.project-panel { min-height: 600px; padding: 27px; position: relative; display: grid; grid-template-rows: auto 245px 1fr auto; overflow: hidden; border: 1px solid #d2deec; border-radius: 14px; background: #fff; box-shadow: 0 22px 60px rgba(12,49,105,.08); }
.project-panel::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(31,99,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,99,238,.05) 1px,transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(#000,transparent 68%); }
.project-panel > * { position: relative; z-index: 2; }.project-top { display: flex; align-items: center; justify-content: space-between; direction: ltr; }.project-number { color: #92a4bc; font: 700 9px "Manrope",sans-serif; }.project-live { display: flex; align-items: center; gap: 7px; color: #607590; font: 700 7px "Manrope",sans-serif; letter-spacing: 1.3px; }.project-live i { width: 6px; height: 6px; border-radius: 50%; background: #24c98b; box-shadow: 0 0 9px rgba(36,201,139,.6); }
.project-visual { height: auto; min-height: 245px; display: grid; place-items: center; overflow: visible; background: transparent; }
.digital-card { width: 270px; height: 166px; padding: 25px; position: relative; color: #fff; border: 1px solid #20518d; border-radius: 15px; background: radial-gradient(circle at 75% 18%,rgba(55,128,248,.32),transparent 33%),linear-gradient(145deg,#071933,#0c3567); box-shadow: 0 32px 50px rgba(7,36,78,.25); transform: perspective(900px) rotateY(-12deg) rotateX(5deg); }
.digital-card::after { content: ""; width: 95px; height: 75px; position: absolute; right: 16px; bottom: 8px; opacity: .35; background-image: radial-gradient(#5ea0ff 1px,transparent 1px); background-size: 8px 8px; }.card-brand { font: 800 16px "Manrope",sans-serif; letter-spacing: 2px; }.card-chip { width: 34px; height: 26px; position: absolute; left: 25px; top: 61px; border: 1px solid #9caa9b; border-radius: 4px; background: linear-gradient(135deg,#d7ddcf,#aeb6a6); }.digital-card b { position: absolute; left: 25px; bottom: 31px; font: 600 8px "Manrope",sans-serif; letter-spacing: 2px; }.digital-card small { position: absolute; right: 22px; top: 26px; font: 600 5px "Manrope",sans-serif; letter-spacing: 1.1px; }.visual-shadow { width: 240px; height: 28px; position: absolute; bottom: 22px; border-radius: 50%; background: radial-gradient(ellipse,rgba(8,42,91,.24),transparent 69%); filter: blur(7px); }
.dash-shell { width: 315px; height: 190px; position: relative; z-index: 2; display: grid; grid-template-columns: 48px 1fr; overflow: hidden; border: 9px solid #08234c; border-radius: 10px; background: #fff; box-shadow: 0 32px 52px rgba(7,40,87,.23); transform: perspective(900px) rotateY(10deg) rotateX(3deg); }.dash-shell aside { padding: 13px 9px; display: grid; align-content: start; justify-items: center; gap: 14px; background: #0b2c5c; }.dash-shell aside b { color: #fff; font: 800 17px "Manrope",sans-serif; }.dash-shell aside i { width: 22px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.25); }.dash-shell > div { padding: 16px; }.dash-line { height: 8px; width: 40%; display: block; border-radius: 5px; background: #dbe7f5; }.dash-shell section { height: 70px; margin-top: 15px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.dash-shell section i { border: 1px solid #dbe6f3; border-top: 3px solid var(--online-blue); border-radius: 5px; background: linear-gradient(140deg,#eef5fc,#fff); }.dash-shell footer { height: 50px; margin-top: 10px; display: flex; align-items: end; gap: 8px; border-bottom: 1px solid #d8e5f3; }.dash-shell footer b { width: 17%; background: linear-gradient(to top,var(--online-blue),#78aafa); }.dash-shell footer b:nth-child(1){height:35%}.dash-shell footer b:nth-child(2){height:72%}.dash-shell footer b:nth-child(3){height:52%}.dash-shell footer b:nth-child(4){height:90%}
.project-copy { direction: rtl; }.project-copy > p:first-child { margin: 0 0 8px; color: var(--online-blue); font: 700 7px "Manrope",sans-serif; letter-spacing: 1.7px; }.project-copy h3 { margin: 0 0 11px; direction: ltr; color: var(--online-navy); font: 800 33px "Manrope",sans-serif; text-align: right; }.project-copy h3 span { color: var(--online-blue); }.chef-panel .project-copy h3 span { color: var(--online-orange); }.project-copy > p:not(:first-child) { margin: 0; color: var(--online-muted); font-size: 12px; line-height: 1.9; }.project-tags { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }.project-tags span { padding: 7px 10px; color: #5f728c; border: 1px solid #dbe4ef; border-radius: 5px; background: #f9fbfd; font-size: 8px; }
.project-panel > a { min-height: 48px; margin-top: 22px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: var(--online-navy); border-top: 1px solid #dce5ef; font-size: 11px; font-weight: 700; }.project-panel > a b { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--online-blue); font-size: 15px; }.project-panel > a:hover { color: var(--online-blue); }.chef-panel > a b { background: var(--online-orange); }

.online-support { min-height: 250px; margin: 0 clamp(30px,6vw,90px) 70px; padding: 45px; position: relative; display: grid; grid-template-columns: 95px 1fr 1.4fr; align-items: center; gap: 28px; overflow: hidden; border: 1px solid #b8ccef; border-radius: 14px; background: linear-gradient(115deg,#f4f8ff,#fff 62%); }
.support-ray { width: 390px; height: 390px; position: absolute; right: -170px; top: -130px; border-radius: 50%; background: radial-gradient(circle,rgba(31,99,238,.18),transparent 66%); }.support-ray::before,.support-ray::after { content: ""; width: 1px; height: 420px; position: absolute; left: 50%; top: -10px; background: linear-gradient(transparent,rgba(31,99,238,.25),transparent); transform: rotate(48deg); }.support-ray::after { transform: rotate(-48deg); }
.support-logo { width: 83px; height: 83px; position: relative; z-index: 2; display: grid; place-items: center; border: 1px solid #b9cdf0; border-radius: 24px; background: #fff; box-shadow: 0 20px 40px rgba(31,99,238,.12); }.support-logo .man-mark { width: 51px; height: 51px; fill: var(--online-blue); }
.support-copy { position: relative; z-index: 2; }.support-copy p { margin: 0 0 8px; color: var(--online-blue); font: 700 7px "Manrope",sans-serif; letter-spacing: 2px; }.support-copy h2 { margin: 0 0 9px; font-size: 29px; }.support-copy > span { color: var(--online-muted); font-size: 11px; }
.support-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: 1px solid #d3dfed; border-radius: 10px; background: rgba(255,255,255,.88); }.support-actions > * { min-height: 80px; padding: 14px 17px; display: flex; align-items: center; gap: 11px; color: var(--online-navy); border: 0; border-left: 1px solid #dbe4ef; background: transparent; }.support-actions > *:last-child { border-left: 0; }.support-actions button { color: #fff; background: var(--online-blue); }.support-actions > * > span:not(.wa-icon):not(.mail-icon) { display: grid; gap: 4px; text-align: right; }.support-actions b { font-size: 10px; }.support-actions small { color: #8392a6; font: 500 7px "Manrope","Tajawal",sans-serif; }.support-actions button small { color: rgba(255,255,255,.70); }.support-actions strong { margin-right: auto; }.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #62f3bb; box-shadow: 0 0 0 5px rgba(98,243,187,.13); }.wa-icon,.mail-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--online-blue); border: 1px solid #b9cdee; border-radius: 50%; }
.online-footer { min-height: 105px; padding: 0 38px; display: grid; grid-template-columns: 200px 1fr auto 85px; align-items: center; gap: 25px; border-top: 1px solid var(--online-line); background: #fff; }.online-footer .online-brand .man-mark { width: 34px; height: 34px; }.online-footer .online-brand strong { font-size: 20px; }.online-footer > p { margin: 0; color: #77879a; font-size: 10px; }.online-footer nav { display: flex; gap: 25px; color: #65758b; font-size: 9px; }.online-footer > small { color: #8795a7; font: 600 7px "Manrope",sans-serif; text-align: left; }
.online-page ~ .chat-fab { width: 58px; height: 58px; left: 24px; bottom: 22px; border: 1px solid #fff; border-radius: 50%; background: var(--online-blue); box-shadow: 0 18px 42px rgba(31,99,238,.28); }

@media (max-width: 1100px) {
  .online-header { grid-template-columns: 185px 1fr 165px; padding: 0 22px; }.online-nav { gap: 21px; }.online-nav a,.online-nav button { font-size: 10px; }
  .orbit-cards { right: 3%; }.orbit-chef { left: 3%; }.orbit-support { right: 5%; }
  .online-support { grid-template-columns: 75px 1fr; }.support-logo { width: 70px; height: 70px; }.support-actions { grid-column: 1/-1; }
}
@media (max-width: 820px) {
  .online-header { width: 100%; min-height: 70px; margin: 0; padding: 0 17px; grid-template-columns: 1fr auto; border: 0; border-bottom: 1px solid #d4dfec; border-radius: 0; }.online-brand { grid-column: 2; }.online-brand .man-mark { width: 34px; height: 34px; }.online-brand strong { font-size: 21px; }.online-brand small { font-size: 5px; }.online-tools { grid-column: 1; grid-row: 1; }.workspace-entry { display: none; }.online-menu { display: grid; }
  .online-nav { display: none; position: absolute; top: 70px; right: 10px; left: 10px; padding: 10px; border: 1px solid #d4dfec; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 20px 50px rgba(9,41,89,.14); }.online-nav.open { display: grid; }.online-nav a,.online-nav button { min-height: 44px; padding: 0 12px; justify-content: flex-start; font-size: 11px; }.online-nav a::after,.online-nav button::after { display: none; }
  .online-page main { width: 100%; border: 0; }.online-hero { min-height: 745px; }.online-hero-content { padding-top: 5px; }.hero-logo-stage { width: 125px; height: 125px; }.hero-logo { width: 86px; height: 86px; }.hero-logo .man-mark { width: 56px; }.online-hero h1 { font-size: 53px; }.online-lead { font-size: 13px; }.orbit-project { min-width: 115px; min-height: 44px; font-size: 8px; }.orbit-cards { top: 20%; right: -15px; }.orbit-chef { top: 53%; left: -18px; }.orbit-support { display: none; }
  .online-services { grid-template-columns: 1fr 1fr; }.online-services > div { border-bottom: 1px solid var(--online-line); }.online-services > div:nth-child(2) { border-left: 0; }
  .online-projects { padding: 62px 20px; }.section-heading { display: block; }.section-heading > p { margin-top: 18px; }.projects-showcase { grid-template-columns: 1fr; }.project-panel { min-height: 570px; }
  .online-support { margin: 0 20px 50px; padding: 30px 24px; grid-template-columns: 65px 1fr; }.support-copy h2 { font-size: 23px; }.support-actions { grid-template-columns: 1fr; }.support-actions > * { min-height: 66px; border-left: 0; border-bottom: 1px solid #dbe4ef; }.support-actions > *:last-child { border-bottom: 0; }
  .online-footer { padding: 25px 20px; grid-template-columns: 1fr auto; }.online-footer > p,.online-footer nav { display: none; }
}
@media (max-width: 520px) {
  .online-hero { min-height: 690px; }.online-grid-bg { background-size: 42px 42px; }.online-hero::before { width: 420px; height: 420px; left: calc(50% - 210px); }.online-hero::after { width: 310px; height: 310px; left: calc(50% - 155px); top: 155px; }
  .hero-logo-stage { margin-bottom: 22px; }.online-eyebrow { font-size: 7px; letter-spacing: 2px; }.online-hero h1 { margin-top: 20px; font-size: 39px; letter-spacing: -1.8px; }.online-lead { font-size: 11px; line-height: 1.9; }.online-actions { width: 100%; display: grid; }.primary-action,.secondary-action { width: 100%; }.hero-status { margin-top: 27px; }.orbit-project { display: none; }
  .online-services { display: block; }.online-services > div { min-height: 104px; padding: 22px; border-left: 0; }
  .online-projects { padding: 52px 12px; }.section-heading { padding: 0 8px; }.section-heading h2 { font-size: 36px; }.project-panel { min-height: 540px; padding: 20px; grid-template-rows: auto 210px 1fr auto; }.project-visual { min-height: 210px; }.digital-card { width: 235px; height: 145px; }.dash-shell { width: 260px; height: 164px; }.project-copy h3 { font-size: 29px; }
  .online-support { margin: 0 12px 35px; padding: 25px 18px; display: block; }.support-logo { margin-bottom: 20px; }.support-copy { margin-bottom: 22px; }.support-actions { display: block; }.support-actions > * { width: 100%; }
  .online-footer { min-height: 90px; }.online-page ~ .chat-fab { left: 14px; bottom: 14px; }
}