@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-ExtraLight.ttf') format('truetype');
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-ExtraBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal/Tajawal-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    --bg-0: #050608;
    --bg-1: #0a0c10;
    --bg-2: #0e1116;
    --surface: #12161d;

    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.15);

    --ink-0: #f6f7f9;
    --ink-1: #aab1bc;
    --ink-2: #838a96;

    --blue: #2e7dfb;
    --blue-btn: #2569d6;
    --blue-deep: #123a86;
    --cyan: #3fd0e0;

    --nav-scrim: rgba(5, 6, 8, 0.82);

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;

    --maxw: 1400px;

    --ease: cubic-bezier(.16, .8, .24, 1);

    --font-en: 'Inter', sans-serif;
    --font-ar: 'Tajawal', sans-serif;
}

html[data-theme="light"] {
    --bg-0: #f7f9fc;
    --bg-1: #ffffff;
    --bg-2: #f1f4f8;
    --surface: #ffffff;

    --line: rgba(15, 23, 42, 0.08);
    --line-strong: rgba(15, 23, 42, 0.16);

    --ink-0: #111827;
    --ink-1: #4b5563;
    --ink-2: #6b7280;

    --nav-scrim: rgba(255, 255, 255, 0.88);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html[lang="en"],
html[lang="en"] body,
html[lang="en"] body *,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] select,
html[lang="en"] option {
    font-family: var(--font-en);
}

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] body *,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] option {
    font-family: var(--font-ar);
}

html[lang="ar"] {
    direction: rtl;
}

html[lang="en"] {
    direction: ltr;
}

body {
    margin: 0;
    min-height: 100%;
    background: var(--bg-0);
    color: var(--ink-0);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
p,
span,
a,
button,
input,
textarea,
select,
option,
label,
li,
small,
strong,
em,
div {
    font-size: inherit;
}

p,
li,
label,
input,
textarea,
select,
button {
    font-size: 16px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
    color: inherit;
}

textarea {
    resize: vertical;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
}

main {
    min-height: 100vh;
}

.wrap {
    width: min(1400px, calc(100% - 48px));
    margin-inline: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: transparent;
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color .25s var(--ease),
        border-color .25s var(--ease),
        color .25s var(--ease),
        box-shadow .25s var(--ease),
        transform .25s var(--ease);
}

.btn-primary {
    background: var(--blue-btn);
    color: #fff;
}

.btn-primary:hover {
    background: #3573d1;
    box-shadow: 0 10px 30px -10px rgba(46, 125, 251, .7);
    transform: translateY(-1px);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

::selection {
    background: var(--blue);
    color: #fff;
}

/* FINAL QA — consistent inner-page spacing and breadcrumb */
.page-chrome{
    position:relative;
    z-index:20;
    padding-top:104px;
    padding-bottom:24px;
    background:var(--bg-0);
}
.site-breadcrumb{
    position:relative;
    min-height:76px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(46,125,251,.34);
    border-radius:20px;
    background:
        linear-gradient(90deg,rgba(7,18,34,.94),rgba(7,29,53,.82) 52%,rgba(7,18,34,.94));
    box-shadow:0 16px 46px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
.site-breadcrumb::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(112deg,transparent 0 38%,rgba(46,125,251,.055) 52%,transparent 66%),
        radial-gradient(circle at 16% 45%,rgba(46,125,251,.12),transparent 24%),
        radial-gradient(circle at 84% 50%,rgba(46,125,251,.08),transparent 22%);
}
.site-breadcrumb::after{
    content:'';
    position:absolute;
    inset-inline-end:-55px;
    top:50%;
    width:180px;
    height:180px;
    transform:translateY(-50%);
    border:1px solid rgba(46,125,251,.15);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(46,125,251,.035),0 0 0 56px rgba(46,125,251,.018);
    pointer-events:none;
}
.site-breadcrumb-links{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:13px;
    padding-inline:26px;
    margin-inline-start:auto;
}
html[dir="ltr"] .site-breadcrumb-links{margin-inline-start:0;margin-inline-end:auto}
.site-breadcrumb-links a,.site-breadcrumb-current{font-size:16px;font-weight:700;white-space:nowrap}
.site-breadcrumb-links a{color:var(--ink-1);transition:color .2s ease}
.site-breadcrumb-links a:hover{color:var(--ink-0)}
.site-breadcrumb-current{color:var(--blue)}
.site-breadcrumb-separator{width:18px;height:18px;color:var(--ink-2);display:grid;place-items:center}
.site-breadcrumb-separator svg{width:16px;height:16px}
html[dir="rtl"] .site-breadcrumb-separator svg{transform:scaleX(-1)}
.site-breadcrumb-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 16px rgba(46,125,251,.8);opacity:.72}
.site-breadcrumb-dot-a{inset-inline-start:18%;top:30%}
.site-breadcrumb-dot-b{inset-inline-start:52%;top:66%}
.site-breadcrumb-dot-c{inset-inline-end:14%;top:30%}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px}
.brand-mark svg{width:100%;height:100%;overflow:visible}
.brand-mark-d{fill:#159cff}
.brand-mark-v{fill:#55c9ff}
.logo{position:relative}
.dynamic-logo{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);z-index:2;background:var(--bg-0)}
.footer-logo{position:relative}
.footer-logo-image{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);z-index:2;background:var(--bg-0)}
@media(max-width:760px){
    .page-chrome{padding-top:86px;padding-bottom:16px}
    .site-breadcrumb{min-height:64px;border-radius:15px}
    .site-breadcrumb-links{padding-inline:18px;gap:9px}
    .site-breadcrumb-links a,.site-breadcrumb-current{font-size:15px}
    .site-breadcrumb-dot-b{display:none}
}


/* Video pages — extend the existing hero video behind the fixed header and breadcrumb */
:root{--page-chrome-space:204px}
body.page-video-under-header .page-chrome{background:transparent}
body.page-video-under-header .site-breadcrumb{background:linear-gradient(90deg,rgba(7,18,34,.78),rgba(7,29,53,.66) 52%,rgba(7,18,34,.78));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:760px){:root{--page-chrome-space:166px}}

/* VIDEO HEADER FINAL — breadcrumb overlays the hero instead of occupying layout space */
body.page-video-under-header .page-chrome{
    position:absolute!important;
    inset:0 0 auto 0!important;
    z-index:150!important;
    width:100%!important;
    padding-top:104px!important;
    padding-bottom:24px!important;
    background:transparent!important;
    pointer-events:none;
}
body.page-video-under-header .page-chrome .site-breadcrumb{pointer-events:auto}
body.page-video-under-header header.nav:not(.scrolled){background:transparent!important}
@media(max-width:760px){
    body.page-video-under-header .page-chrome{padding-top:86px!important;padding-bottom:16px!important}
}