/* ==========================================================================
   OTS website — main stylesheet
   --------------------------------------------------------------------------
   1. Design tokens (brand palette, light and dark themes)
   2. Base and typography
   3. Layout helpers
   4. Header, navigation and mega menu
   5. Heroes
   6. Components (buttons, cards, lists, diagrams, figures, forms)
   7. Footer
   Notes
   - Logical properties (margin-inline, padding-inline, inset-inline) are used
     so the layout mirrors correctly when Arabic (dir="rtl") is added.
   - Colours are only ever referenced through tokens; change them here.
   ========================================================================== */

/* 0. Fonts: IBM Plex Sans, self-hosted (SIL Open Font License, see assets/fonts) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-300.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); }

/* Arabic: IBM Plex Sans Arabic, the Arabic companion of IBM Plex Sans */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-300.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); }

/* 1. Design tokens -------------------------------------------------------- */
:root {
  /* Brand palette (fixed) */
  --navy: #0B2D5C;          /* Deep Tech Navy — primary */
  --blue: #168FD1;          /* Digital Blue — primary */
  --cyan: #20C4D3;          /* Electric Cyan — restrained highlights */
  --teal: #0CB5AC;          /* Tech Teal — supporting */
  --lime: #A3E635;          /* Accent Lime — action buttons, small accents */
  --charcoal: #162233;      /* Deep Charcoal */
  --logo-navy: #003668;     /* sampled from the OTS logo (upper loops) */
  --logo-blue: #005AA2;     /* sampled from the OTS logo (lower loops and wordmark) */
  --soft-blue: #A9CBEA;     /* formal light blue for highlights on dark backgrounds */

  /* Light theme (default) */
  --bg: #FFFFFF;
  --bg-alt: #F3F8FB;        /* Ice Blue White */
  --surface: #FFFFFF;
  --line: #E5EBF1;          /* Soft Gray */
  --line-strong: #CBD6E2;
  --text: #22303F;
  --text-soft: #586879;
  --heading: #003668;
  --link: #005AA2;
  --focus: #168FD1;

  /* Dark surfaces used in both themes (header, heroes, footer) */
  --ink-bg: #003668;
  --ink-bg-2: #0B2D5C;
  --ink-text: #FFFFFF;
  --ink-soft: #B6C7DB;
  --ink-line: rgba(255, 255, 255, .12);

  --radius: 6px;
  --max: 1240px;
  --shadow: 0 1px 2px rgba(11, 45, 92, .06), 0 8px 24px rgba(11, 45, 92, .06);
  --header-h: 86px;
}

/* Dark theme: follows the system unless the visitor chooses light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1928; --bg-alt: #122236; --surface: #15273D; --line: #21374F; --line-strong: #2E4866;
    --text: #D7E1EC; --text-soft: #9DB1C6; --heading: #FFFFFF; --link: #5CC2EA;
    --ink-bg: #0A2448; --ink-bg-2: #0B1B33; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1928; --bg-alt: #122236; --surface: #15273D; --line: #21374F; --line-strong: #2E4866;
  --text: #D7E1EC; --text-soft: #9DB1C6; --heading: #FFFFFF; --link: #5CC2EA;
  --ink-bg: #0A2448; --ink-bg-2: #0B1B33; --shadow: none;
}

/* Safe areas for phones that draw under system bars */
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 16px); }
*, *::before, *::after { box-sizing: inherit; }

/* 2. Base and typography -------------------------------------------------- */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { color: var(--heading); margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.07; letter-spacing: -.025em; }
h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.15; }
h3 { font-size: 19px; line-height: 1.35; }
h4 { font-size: 15px; }
p { margin: 0 0 1em; max-width: 72ch; }
.lede { font-size: clamp(17px, 1.45vw, 20px); color: var(--text-soft); line-height: 1.6; max-width: 64ch; }
.soft { color: var(--text-soft); }
.small { font-size: 14px; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--lime); color: var(--charcoal); padding: 10px 16px; z-index: 100; border-radius: 4px; font-weight: 600; }
.skip:focus { inset-inline-start: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Eyebrow label above section headings: sentence case with a short lime rule */
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--link); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .7; flex: none; }
.ink .eyebrow { color: var(--soft-blue); }

/* 3. Layout helpers ------------------------------------------------------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 32px; }
@media (max-width: 640px) { .wrap { padding-inline: 20px; } }
.section { padding-block: 96px; }
.section.tight { padding-block: 64px; }
.section.alt { background: var(--bg-alt); }
.section.ink { background: var(--ink-bg); color: var(--ink-soft); }
.ink h1, .ink h2, .ink h3, .ink h4 { color: var(--ink-text); }
.ink p, .ink .lede, .ink .soft { color: var(--ink-soft); }
.ink a:not(.btn) { color: var(--soft-blue); }
@media (max-width: 800px) { .section { padding-block: 64px; } .section.tight { padding-block: 44px; } }

.head { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: end; margin-bottom: 48px; }
.head.single { display: block; max-width: 760px; }
.head.single .lede { margin-top: 16px; }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; } }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 22px; } }
.sticky { position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 900px) { .sticky { position: static; } }

/* 4. Header, navigation and mega menu ------------------------------------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--logo-navy); border-bottom: 1px solid var(--ink-line); }
.site-header .bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand img { height: 58px; width: auto; }
.wordmark { color: #fff; font-weight: 300; font-size: 17px; line-height: 1.08; letter-spacing: .01em; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, .4); }
@media (max-width: 420px) { .brand img { height: 48px; } .wordmark { font-size: 15px; } }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > .item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; color: #DCE6F2; text-decoration: none; font: inherit;
  font-size: 15px; font-weight: 500; padding: 10px 13px; background: none; border: 0; cursor: pointer; border-radius: 4px;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 0; font-weight: 600; }
.nav-link .chev { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 38px; height: 38px; border-radius: 4px; border: 1px solid var(--ink-line); background: transparent; color: #DCE6F2; cursor: pointer; display: grid; place-items: center; }
.theme-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
/* Theme button icon: moon in light mode, sun in dark mode */
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
/* Theme button shows the mode it will switch to: moon in light mode, sun in dark mode */
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.menu-btn { display: none; }

/* Mega menu panel */
.mega {
  position: absolute; top: calc(100% - 4px); inset-inline-start: 50%; transform: translateX(-50%);
  width: min(980px, calc(100vw - 48px)); background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 18px 48px rgba(6, 22, 46, .28); padding: 26px;
  /* Smooth open and close: fade and a short slide */
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
[dir="rtl"] .mega { transform: translate(50%, 8px); }
.item.open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
[dir="rtl"] .item.open > .mega { transform: translate(50%, 0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.mega-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega h4 { font-size: 13px; color: var(--text-soft); font-weight: 600; margin-bottom: 10px; }
.mega h4 a { color: inherit; text-decoration: none; }
.mega h4 a:hover { color: var(--link); }
.mega ul { list-style: none; padding: 0; margin: 0; }
.mega li a { display: block; padding: 5px 0; color: var(--text); text-decoration: none; font-size: 15px; }
.mega li a:hover { color: var(--link); }
.mega .mega-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; flex-wrap: wrap; }
.mega .desc { font-size: 13.5px; color: var(--text-soft); display: block; line-height: 1.45; margin-top: 2px; }

@media (max-width: 1220px) {
  .menu-btn { order: 3; display: inline-flex; font: inherit; font-size: 15px; color: #fff; background: none; border: 1px solid var(--ink-line); padding: 8px 14px; border-radius: 4px; cursor: pointer; }
  .nav { display: none; position: absolute; inset-inline: 0; top: var(--header-h); flex-direction: column; align-items: stretch; background: var(--logo-navy); padding: 8px 20px 22px; border-bottom: 1px solid var(--ink-line); max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .nav.open { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--ink-line); border-radius: 0; }
  .nav-link[aria-current="page"] { box-shadow: none; }
  .mega { position: static; transform: none; width: auto; box-shadow: none; margin: 8px 0 14px; padding: 18px; display: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  [dir="rtl"] .mega, [dir="rtl"] .item.open > .mega { transform: none; }
  .item.open > .mega { display: block; transform: none; animation: ots-fade-down .22s ease both; }
  .nav.open { animation: ots-fade-down .25s ease both; }
  .mega-grid, .mega-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .nav-actions .btn { display: none; }
}
@media (max-width: 560px) { .mega-grid, .mega-grid.cols-3 { grid-template-columns: 1fr; } }

/* 5. Heroes --------------------------------------------------------------- */
.hero, .page-hero { position: relative; overflow: hidden; color: var(--ink-soft); background: linear-gradient(160deg, var(--logo-navy) 0%, #00447F 45%, #0B2D5C 100%); }
/* The logo's loop shape, used as a large watermark */
.motif { position: absolute; pointer-events: none; background: url('/assets/img/ots-motif.png') no-repeat center / contain; opacity: .09; }
.page-hero .motif { width: 420px; height: 412px; inset-inline-end: -60px; top: -40px; }
@media (max-width: 800px) { .page-hero .motif { width: 300px; height: 294px; inset-inline-end: -110px; } }
.grid-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 60%); mask-image: linear-gradient(90deg, transparent 5%, #000 60%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; padding-block: 92px 100px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--soft-blue); }
.hero .rule { width: 64px; height: 3px; background: var(--soft-blue); margin: 26px 0 18px; }
.hero .sub { color: #fff; font-size: 20px; font-weight: 500; margin: 0 0 12px; }
.hero .lede { color: var(--ink-soft); }
@media (max-width: 1000px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 70px 80px; } }
.page-hero .wrap { position: relative; padding-block: 80px; }
.page-hero h1 { color: #fff; font-size: clamp(34px, 4.3vw, 54px); max-width: 22ch; }
.page-hero .lede { color: var(--ink-soft); margin-top: 18px; }
.crumbs { font-size: 14.5px; color: #9FB6D0; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: #9FB6D0; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .6; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-meta span { font-size: 14px; color: #E2EBF5; border: 1px solid var(--ink-line); padding: 5px 12px; border-radius: 3px; }

/* Platform panel inside the home hero */
.platform-panel { border: 1px solid rgba(255, 255, 255, .14); background: rgba(6, 20, 40, .55); border-radius: 8px; padding: 22px; }
.platform-panel .ph { display: flex; justify-content: space-between; font-size: 13.5px; color: #C2D2E5; margin-bottom: 8px; }
.pp-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.pp-row b { color: #fff; font-size: 14px; font-weight: 600; border-inline-start: 3px solid var(--c, var(--soft-blue)); padding-inline-start: 10px; display: block; }
.pp-row b small { display: block; font-weight: 400; color: #8FA8C4; font-size: 12.5px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chips a { font-size: 12.5px; color: #E6EEF7; text-decoration: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); padding: 3px 9px; border-radius: 3px; }
.pp-chips a:hover { border-color: var(--soft-blue); color: #fff; }
@media (max-width: 520px) { .pp-row { grid-template-columns: 1fr; gap: 8px; } }

/* 6. Components ----------------------------------------------------------- */
/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: inherit; font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--lime); color: var(--charcoal); border-color: var(--lime); }
.btn-primary:hover { background: #B7EE5F; border-color: #B7EE5F; }
.btn-solid { background: var(--logo-blue); color: #fff; border-color: var(--logo-blue); }
.btn-solid:hover { background: var(--logo-navy); border-color: var(--logo-navy); }
:root[data-theme="dark"] .btn-solid { background: var(--blue); border-color: var(--blue); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-solid { background: var(--blue); border-color: var(--blue); } }
.btn-outline { background: transparent; color: var(--heading); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--blue); color: var(--link); }
.ink .btn-outline, .hero .btn-outline, .page-hero .btn-outline, .home-hero .btn-outline, .close-band .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ink .btn-outline:hover, .hero .btn-outline:hover, .page-hero .btn-outline:hover, .home-hero .btn-outline:hover, .close-band .btn-outline:hover { border-color: #fff; color: #fff; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }
[dir="rtl"] .btn .arr { transform: scaleX(-1); }
.text-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.text-link:hover { text-decoration: underline; }

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts > div { padding: 6px 26px 6px 0; }
.facts > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 26px; }
.facts .n { font-size: clamp(32px, 3.6vw, 46px); font-weight: 600; color: var(--heading); line-height: 1; letter-spacing: -.02em; }
.facts .d { color: var(--text-soft); font-size: 15px; margin-top: 12px; max-width: 26ch; }
@media (max-width: 820px) { .facts { grid-template-columns: 1fr 1fr; gap: 28px 0; } .facts > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } }

/* Cards */
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; color: var(--text); text-decoration: none; }
a.card { transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); margin: 0; font-size: 15.5px; }
.ink .card p { color: var(--ink-soft); }
.card .meta { font-size: 13px; color: var(--text-soft); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.card .more { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 14.5px; color: var(--link); }
.card.accent { border-top: 3px solid var(--c, var(--blue)); }
.pill { font-size: 12.5px; border: 1px solid var(--line-strong); color: var(--text-soft); border-radius: 3px; padding: 1px 8px; display: inline-block; }
.pill.draft { border-color: #E3B341; color: #8A6510; background: #FFF7E0; }
:root[data-theme="dark"] .pill.draft { background: transparent; color: #E3B341; }

/* Product tile (catalogue) */
.ptile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.ptile:hover { border-color: var(--blue); }
.ptile b { color: var(--heading); font-size: 16.5px; }
.ptile span { font-size: 14.5px; color: var(--text-soft); margin-top: 4px; line-height: 1.5; }
.ptile em { font-style: normal; margin-top: 10px; }

/* Rule lists (heading + text, separated by lines) */
.rules > div { padding: 24px 0; border-top: 1px solid var(--line); }
.rules > div:last-child { border-bottom: 1px solid var(--line); }
.rules h3 { margin-bottom: 6px; }
.rules p { color: var(--text-soft); margin: 0; }
.rules.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 52px; }
.rules.cols > div:last-child { border-bottom: 0; }
@media (max-width: 800px) { .rules.cols { grid-template-columns: 1fr; } }

ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { position: relative; padding: 11px 0; padding-inline-start: 30px; border-bottom: 1px solid var(--line); }
ul.ticks li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 20px; width: 11px; height: 6px; border-inline-start: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.ink ul.ticks li { border-color: var(--ink-line); color: var(--ink-soft); }

/* Tabs (layer explorer) */
.tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { font: inherit; font-size: 15.5px; font-weight: 600; color: var(--text-soft); background: none; border: 0; padding: 15px 20px; cursor: pointer; position: relative; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--heading); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--logo-blue); }
.tab-panel { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; padding-top: 36px; }
.tab-panel[hidden] { display: none; }
@media (max-width: 900px) { .tab-panel { grid-template-columns: 1fr; gap: 20px; } }

/* Key figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.figs > div { background: var(--logo-navy); border-radius: var(--radius); padding: 22px; }
.figs .n { font-size: 32px; font-weight: 600; color: #fff; line-height: 1.05; letter-spacing: -.02em; }
.figs > div:first-child .n { color: #fff; }
.figs .d { font-size: 14px; color: #B6C7DB; margin-top: 8px; }

/* Process flow diagram */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.flow .st { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.flow .st b { display: block; color: var(--heading); font-size: 15px; margin-bottom: 8px; }
.flow .st span { display: block; font-size: 13.5px; color: var(--text-soft); border-top: 1px solid var(--line); padding: 5px 0; }
.flow .ar { align-self: center; color: var(--blue); font-weight: 600; }
[dir="rtl"] .flow .ar { transform: scaleX(-1); }
@media (max-width: 720px) { .flow .ar { display: none; } }

/* Layered architecture diagram */
.arch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.arch .lyr { display: grid; grid-template-columns: 210px 1fr; border-top: 1px solid var(--line); }
.arch .lyr:first-child { border-top: 0; }
.arch .lyr > b { background: var(--bg-alt); padding: 16px 18px; color: var(--heading); font-size: 15px; }
.arch .lyr > div { padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.arch .lyr > div span { font-size: 14px; border: 1px solid var(--line); border-radius: 3px; padding: 3px 10px; background: var(--surface); }
.arch .lyr.core > b { background: var(--logo-navy); color: #fff; }
@media (max-width: 680px) { .arch .lyr { grid-template-columns: 1fr; } }

/* Numbered steps */
.steps7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; counter-reset: s; }
.steps7 li { list-style: none; border-top: 3px solid var(--teal); padding-top: 10px; font-size: 14px; }
.steps7 li::before { counter-increment: s; content: "0" counter(s); display: block; color: var(--link); font-weight: 600; font-size: 13px; }
.steps7 { padding: 0; margin: 0; }
@media (max-width: 860px) { .steps7 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.steps3 > div { border-top: 2px solid var(--soft-blue); padding-top: 20px; }
.steps3 .k { font-size: 14px; color: var(--soft-blue); font-weight: 600; }
.steps3 .w { font-size: 28px; font-weight: 600; color: #fff; margin: 4px 0 8px; }
@media (max-width: 800px) { .steps3 { grid-template-columns: 1fr; } }

/* Capability grid on product pages */
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.caps > div { padding: 18px 0; border-top: 1px solid var(--line); }
.caps h3 { font-size: 16.5px; margin-bottom: 4px; }
.caps p { color: var(--text-soft); font-size: 15.5px; margin: 0; }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 14px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--heading); padding: 5px 12px; border-radius: 3px; font-weight: 500; text-decoration: none; }
a.tag:hover { border-color: var(--blue); }

/* Callout */
.callout { background: var(--bg-alt); border-inline-start: 3px solid var(--logo-blue); padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .callout { border-radius: var(--radius) 0 0 var(--radius); }
.callout p { margin: 6px 0 0; }

/* Product page layout */
.pd { display: grid; grid-template-columns: 240px 1fr; gap: 64px; }
.pd-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; font-size: 14.5px; padding-inline-end: 6px; }
.pd-nav h4 { font-size: 13px; color: var(--text-soft); margin: 20px 0 6px; }
.pd-nav h4:first-child { margin-top: 0; }
.pd-nav a { display: block; text-decoration: none; color: var(--text); padding: 4px 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); }
.pd-nav a:hover { color: var(--link); }
.pd-nav a[aria-current="page"] { border-inline-start-color: var(--blue); color: var(--link); font-weight: 600; }
.pd-body > h2 { font-size: clamp(24px, 2.5vw, 30px); margin: 56px 0 20px; }
.pd-body > h2:first-child { margin-top: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.toc a { text-decoration: none; }
.pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; font-weight: 600; }
.pager small { display: block; color: var(--text-soft); font-weight: 400; font-size: 13px; }
@media (max-width: 960px) { .pd { grid-template-columns: 1fr; gap: 24px; } .pd-nav { display: none; } }

/* Catalogue layer block */
.layer-block { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding-block: 44px; border-top: 1px solid var(--line); }
.layer-block:first-child { border-top: 0; padding-top: 0; }
.layer-block .bar2 { width: 36px; height: 3px; margin-bottom: 14px; background: var(--c, var(--blue)); }
.layer-block .lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .layer-block { grid-template-columns: 1fr; gap: 18px; } .layer-block .lb-grid { grid-template-columns: 1fr; } }

/* Integration map */
.map svg { width: 100%; height: auto; }
.map .node { fill: var(--bg-alt); stroke: var(--line-strong); }
.map .t { fill: var(--heading); font: 600 14px "IBM Plex Sans", sans-serif; text-anchor: middle; }
.map .s { fill: var(--text-soft); font: 12px "IBM Plex Sans", sans-serif; text-anchor: middle; }
.map .edge { stroke: var(--line-strong); stroke-width: 1.4; }

/* Articles */
.article { max-width: 760px; }
.article p, .article li { font-size: 18px; line-height: 1.75; }
.article h2 { font-size: 26px; margin: 40px 0 14px; }
.article ul { padding-inline-start: 22px; margin: 0 0 1.2em; }
.article li { margin-bottom: 8px; }
.article blockquote { margin: 34px 0; padding: 4px 0; padding-inline-start: 24px; border-inline-start: 3px solid var(--logo-blue); font-size: 23px; line-height: 1.45; color: var(--heading); font-weight: 500; }
.draft-note { background: #FFF7E0; border: 1px solid #F0D58A; color: #6E520C; padding: 12px 16px; border-radius: 4px; font-size: 14.5px; margin-bottom: 28px; }
:root[data-theme="dark"] .draft-note { background: transparent; color: #E3B341; }

/* Forms */
.form { display: grid; gap: 18px; }
.form label { display: grid; align-content: start; gap: 7px; font-size: 14px; font-weight: 600; color: var(--heading); }
.form .opt { font-weight: 400; color: var(--text-soft); }
.form label > .lbl { display: block; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; padding: 12px 14px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: 2px solid rgba(22, 143, 209, .25); outline-offset: 0; }
.form [aria-invalid="true"] { border-color: #C93C3C; }
.form textarea { min-height: 160px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .err { color: #C93C3C; font-size: 13.5px; font-weight: 500; min-height: 0; }
.form-status { padding: 14px 16px; border-radius: 4px; font-size: 15px; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #EAF8E4; color: #2C5E14; border: 1px solid #BFE3A8; }
.form-status.bad { background: #FDECEC; color: #8A1F1F; border: 1px solid #F2B8B8; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; border: 1px solid var(--line-strong); border-radius: 4px; padding: 9px 14px; cursor: pointer; }
.choice input { width: auto; margin: 0; accent-color: var(--blue); }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--bg-alt); }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.contact-item { padding: 20px 0; border-top: 1px solid var(--line); }
.contact-item b { display: block; color: var(--heading); margin-bottom: 4px; }
.contact-item a { text-decoration: none; }

/* 7. Footer --------------------------------------------------------------- */
.site-footer { background: var(--charcoal); color: #A9BBD0; padding-block: 72px 32px; font-size: 15px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 36px; }
.site-footer .brand { display: inline-flex; margin-bottom: 20px; }
.site-footer .brand img { height: 58px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.site-footer a:not(.brand) { display: block; color: #A9BBD0; text-decoration: none; margin-bottom: 9px; }
.site-footer a:hover { color: #fff; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.site-footer .social a { display: inline-grid; color: #fff; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; margin: 0; }
.social a:hover { border-color: var(--soft-blue); }
.legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; }
@media (max-width: 960px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   Home page
   ========================================================================== */
.home-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--logo-navy) 0%, #00467F 50%, #0B2D5C 100%); color: var(--ink-soft); }
.home-hero .motif { width: 760px; height: 745px; inset-inline-end: -140px; top: 50%; transform: translateY(-50%); opacity: .1; }
.home-hero .wrap { position: relative; padding-block: 104px 150px; }
.home-hero .company { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .02em; margin-bottom: 26px; padding: 7px 14px 7px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 40px; }
.home-hero .company img { width: 28px; height: auto; }
.home-hero h1 { color: #fff; font-size: clamp(42px, 5.8vw, 74px); max-width: 17ch; }
.home-hero h1 em { font-style: normal; color: var(--soft-blue); }
.home-hero .lede { color: #C9D7E8; margin-top: 26px; font-size: clamp(18px, 1.6vw, 21px); }
.home-hero .audience { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); max-width: 760px; font-size: 15px; color: #E4ECF6; }
.home-hero .audience span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--soft-blue); border-radius: 1px; margin-inline-end: 10px; vertical-align: middle; }
@media (max-width: 800px) { .home-hero .wrap { padding-block: 72px 120px; } .home-hero .motif { width: 420px; height: 412px; inset-inline-end: -200px; opacity: .08; } }

/* Figures panel overlapping the hero */
.figure-band { position: relative; margin-top: -72px; z-index: 2; }
.figure-band .inner { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 30, 70, .14); display: grid; grid-template-columns: repeat(4, 1fr); }
.figure-band .inner > div { padding: 30px 28px; }
.figure-band .inner > div + div { border-inline-start: 1px solid var(--line); }
.figure-band .n { font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; color: var(--heading); line-height: 1; letter-spacing: -.02em; }
.figure-band .d { color: var(--text-soft); font-size: 14.5px; margin-top: 10px; }
.figure-band .src { display: block; font-size: 13px; color: var(--link); margin-top: 6px; font-weight: 500; text-decoration: none; }
@media (max-width: 900px) { .figure-band .inner { grid-template-columns: 1fr 1fr; } .figure-band .inner > div:nth-child(3) { border-inline-start: 0; } .figure-band .inner > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Intro statement */
.statement { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.32; color: var(--heading); font-weight: 400; letter-spacing: -.01em; max-width: 30ch; }
.statement b { font-weight: 600; }

/* Lifecycle flow on the home page */
.lifecycle { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lifecycle > div { padding: 24px 20px; border-inline-start: 1px solid var(--line); position: relative; }
.lifecycle > div:first-child { border-inline-start: 0; }
.lifecycle .no { font-size: 13px; font-weight: 600; color: var(--link); }
.lifecycle h3 { font-size: 17px; margin: 4px 0 12px; }
.lifecycle a { display: block; font-size: 14px; text-decoration: none; color: var(--text); padding: 5px 0; border-top: 1px solid var(--line); }
.lifecycle a:hover { color: var(--link); }
.lifecycle > div::after { content: ""; position: absolute; top: 28px; inset-inline-end: -7px; width: 12px; height: 12px; background: var(--surface); border-top: 1px solid var(--line); border-inline-end: 1px solid var(--line); transform: rotate(45deg); z-index: 1; }
[dir="rtl"] .lifecycle > div::after { transform: rotate(-45deg); }
.lifecycle > div:last-child::after { display: none; }
@media (max-width: 1000px) { .lifecycle { grid-template-columns: repeat(3, 1fr); } .lifecycle > div:nth-child(4) { border-inline-start: 0; } .lifecycle > div:nth-child(n+4) { border-top: 1px solid var(--line); } .lifecycle > div::after { display: none; } }
@media (max-width: 600px) { .lifecycle { grid-template-columns: 1fr 1fr; } .lifecycle > div:nth-child(odd) { border-inline-start: 0; } .lifecycle > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Closing band with the logo motif */
.close-band { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--logo-navy), #0B2D5C); color: var(--ink-soft); }
.close-band .motif { width: 520px; height: 510px; inset-inline-start: -140px; bottom: -200px; opacity: .1; }
.close-band .wrap { position: relative; padding-block: 96px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.close-band h2 { color: #fff; font-size: clamp(28px, 3.2vw, 42px); }
.close-band .lede { color: #C9D7E8; }
@media (max-width: 900px) { .close-band .wrap { grid-template-columns: 1fr; gap: 20px; padding-block: 72px; } }

/* Small phones (≤ 400px): keep the header and figures within the screen */
@media (max-width: 400px) {
  .site-header .bar { gap: 10px; }
  .brand { gap: 10px; }
  .brand img { height: 42px; }
  .wordmark { font-size: 13.5px; padding-inline-start: 10px; }
  .nav-actions { gap: 6px; }
  .theme-btn { width: 36px; height: 36px; }
  .menu-btn { padding: 8px 11px !important; }
}
@media (max-width: 460px) {
  .figure-band .inner { grid-template-columns: 1fr; }
  .figure-band .inner > div + div { border-inline-start: 0; border-top: 1px solid var(--line); }
  .figure-band .inner > div { padding: 22px 22px; }
  .lifecycle { grid-template-columns: 1fr; }
  .lifecycle > div { border-inline-start: 0 !important; }
  .lifecycle > div + div { border-top: 1px solid var(--line); }
  .wrap { padding-inline: 18px; }
}

/* Layer table on the platform page */
.ltable { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lrow { display: grid; grid-template-columns: 280px 1fr 110px; gap: 24px; align-items: center; padding: 18px 24px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; background: var(--surface); }
.lrow:first-child { border-top: 0; }
a.lrow { border-inline-start: 3px solid var(--c, var(--blue)); }
a.lrow:hover { background: var(--bg-alt); }
.lrow b { display: block; color: var(--heading); font-size: 17px; }
.lrow small { color: var(--text-soft); font-size: 13px; }
.lrow .cnt { font-size: 26px; font-weight: 600; color: var(--heading); text-align: end; }
.lhead { background: var(--bg-alt); font-size: 13px; font-weight: 600; color: var(--text-soft); padding-block: 12px; }
.lhead span:last-child { text-align: end; }
@media (max-width: 760px) { .lrow { grid-template-columns: 1fr auto; gap: 8px 16px; } .lrow > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 15px; } .lhead span:nth-child(2) { display: none; } }

/* Tablet refinements */
@media (max-width: 1100px) { .split { gap: 40px; } .hero .wrap, .home-hero .wrap { padding-inline: 28px; } }

/* ==========================================================================
   Orientation: section bar, current links, back to top
   ========================================================================== */
.localnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 30, 70, .05); }
.localnav .wrap { display: flex; align-items: center; gap: 18px; min-height: 54px; }
.ln-label { font-size: 13px; font-weight: 600; color: var(--text-soft); padding-inline-end: 18px; border-inline-end: 1px solid var(--line); flex: none; }
.ln-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ln-links::-webkit-scrollbar { display: none; }
.ln-links a { white-space: nowrap; font-size: 14.5px; color: var(--text); text-decoration: none; padding: 15px 10px; border-bottom: 2px solid transparent; }
.ln-links a:hover { color: var(--link); }
.ln-links a[aria-current="page"] { color: var(--heading); font-weight: 600; border-bottom-color: var(--logo-blue); }
@media (max-width: 640px) { .ln-label { display: none; } }
.pd-nav, .sticky { top: calc(var(--header-h) + 80px); }
.mega a[aria-current="page"] { color: var(--link); font-weight: 600; }
.mega a[aria-current="page"]::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.to-top { position: fixed; inset-inline-end: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--heading); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); }
.to-top:hover { border-color: var(--logo-blue); color: var(--link); }

/* ==========================================================================
   Slider
   ========================================================================== */
.slider { position: relative; }
.slider-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.slider-ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.slider-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--heading); font-size: 20px; cursor: pointer; line-height: 1; }
.slider-ctrl button:hover { border-color: var(--logo-blue); color: var(--link); }
.slider-count { font-size: 14px; color: var(--text-soft); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.slider-viewport { overflow: hidden; border-radius: 10px; touch-action: pan-y; }
.slider-track { display: flex; transition: transform .45s cubic-bezier(.4, .1, .2, 1); }
.slide { flex: 0 0 100%; min-width: 0; }
.slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.slider-dots button { width: 28px; height: 4px; border: 0; border-radius: 2px; background: var(--line-strong); cursor: pointer; padding: 0; }
.slider-dots button[aria-current="true"] { background: var(--logo-blue); width: 44px; }
[dir="rtl"] .slider-ctrl button { transform: scaleX(-1); }

/* Product slide */
.pslide { display: grid; grid-template-columns: 5fr 7fr; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 420px; }
.pslide .txt { padding: 40px; display: flex; flex-direction: column; }
.pslide .layer { font-size: 13px; font-weight: 600; color: var(--link); margin-bottom: 10px; }
.pslide h3 { font-size: 28px; line-height: 1.2; }
.pslide .tagline { color: var(--text-soft); margin: 12px 0 0; }
.pslide .bigfig { margin-top: auto; padding-top: 26px; }
.pslide .bigfig b { display: block; font-size: 40px; font-weight: 600; color: var(--heading); line-height: 1; letter-spacing: -.02em; }
.pslide .bigfig span { font-size: 14px; color: var(--text-soft); }
.pslide .vis { background: linear-gradient(160deg, var(--logo-navy), #0B2D5C); padding: 34px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.pslide .vis .cap { color: var(--soft-blue); font-size: 13px; font-weight: 600; margin-bottom: 14px; position: relative; }
.pslide .vis .motif { width: 380px; height: 372px; inset-inline-end: -120px; bottom: -150px; opacity: .08; }
.pslide .vis .flow, .pslide .vis .arch, .pslide .vis .steps7, .pslide .vis .chips { position: relative; }
.pslide .vis .flow .st, .pslide .vis .arch { background: rgba(255,255,255,.96); }
.pslide .vis .flow .ar { color: var(--soft-blue); }
.pslide .vis .steps7 { grid-template-columns: repeat(4, 1fr); }
.pslide .vis .steps7 li { color: #fff; border-color: var(--soft-blue); }
.pslide .vis .steps7 li::before { color: var(--soft-blue); }
.pslide .vis .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pslide .vis .chips span { color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; padding: 6px 12px; font-size: 14px; }
.pslide .vis .bars { position: relative; display: grid; gap: 12px; }
.pslide .vis .bars div { display: grid; grid-template-columns: 1fr auto; color: #fff; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 10px; }
.pslide .vis .bars b { font-size: 30px; font-weight: 600; }
.pslide .vis .bars span { color: var(--soft-blue); align-self: end; font-size: 14px; }
:root[data-theme="dark"] .pslide .vis .flow .st b, :root[data-theme="dark"] .pslide .vis .arch b { color: #003668; }
:root[data-theme="dark"] .pslide .vis .flow .st span, :root[data-theme="dark"] .pslide .vis .arch span { color: #44546A; background: #fff; }
@media (max-width: 900px) { .pslide { grid-template-columns: 1fr; } .pslide .txt, .pslide .vis { padding: 26px; } .pslide h3 { font-size: 23px; } .pslide .vis .steps7 { grid-template-columns: repeat(2, 1fr); } .slider-top { flex-direction: column; align-items: start; } }

/* Article slide */
.aslide { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); text-decoration: none; color: var(--text); min-height: 300px; }
.aslide .vis { background: linear-gradient(160deg, var(--logo-navy), #0B2D5C); position: relative; overflow: hidden; padding: 36px; display: flex; align-items: flex-end; }
.aslide .vis .motif { width: 420px; height: 412px; inset-inline-end: -100px; top: -80px; opacity: .1; }
.aslide .vis q { position: relative; color: #fff; font-size: 22px; line-height: 1.4; quotes: none; }
.aslide .txt { padding: 36px; }
.aslide h3 { font-size: 25px; margin: 10px 0 12px; }
.aslide p { color: var(--text-soft); }
@media (max-width: 800px) { .aslide { grid-template-columns: 1fr; } .aslide .vis { min-height: 160px; } }

/* ==========================================================================
   Motion: smooth page changes and interface transitions
   All effects use opacity and transform only, and are switched off for
   visitors who ask their device to reduce motion.
   ========================================================================== */
@keyframes ots-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ots-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ots-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Page-to-page transitions (Chrome, Edge, Safari 18.2+); other browsers load normally */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: ots-vt-out .18s ease both; }
::view-transition-new(root) { animation: ots-vt-in .32s ease both; }
@keyframes ots-vt-out { to { opacity: 0; } }
@keyframes ots-vt-in { from { opacity: 0; transform: translateY(6px); } }
html { scroll-behavior: smooth; }

/* Header gains a soft shadow once the page scrolls */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0, 20, 50, .22); }

/* Links, buttons and cards ease between states */
a, button, .btn, .tag, .ptile, .card, .tabs button, .ln-links a, .nav-link { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .2s ease; }
a.card:hover, a.ptile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 40, 90, .08); }
.btn:active { transform: translateY(1px); }

/* Content fades up gently as it scrolls into view (added by main.js) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Tab panels and status messages fade in */
.tab-panel:not([hidden]) { animation: ots-fade-in .3s ease both; }
.form-status.show { animation: ots-fade-up .3s ease both; }

/* Back-to-top fades in and out */
.to-top { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }

/* Gradual colour change when switching light and dark mode (class added for a moment by main.js) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important; }

/* FAQ accordion */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; padding-inline-end: 36px; position: relative; font-weight: 600; color: var(--heading); font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset-inline-end: 6px; top: 24px; width: 9px; height: 9px; border-inline-end: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq .ans { padding-bottom: 18px; }
.faq .ans p { margin: 0; color: var(--text-soft); }
.faq details[open] .ans { animation: ots-fade-up .3s ease both; }

/* Slider autoplay controls */
.slider-ctrl .play { font-size: 14px; }
.slider-dots button { position: relative; overflow: hidden; }
.slider-dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--soft-blue); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .slider-dots button[aria-current="true"]::after { transform-origin: right; }
.slider.autoplay .slider-dots button[aria-current="true"]::after { animation: ots-progress var(--slide-time, 6s) linear forwards; }
.slider.autoplay.paused .slider-dots button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes ots-progress { to { transform: scaleX(1); } }
.slider-track { transition: transform .7s cubic-bezier(.33, .1, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Languages
   ========================================================================== */
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, "Segoe UI", sans-serif; line-height: 1.8; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .statement, html[lang="ar"] .quote { letter-spacing: 0; line-height: 1.35; }
html[lang="ar"] .eyebrow, html[lang="ar"] .layer, html[lang="ar"] .pslide .layer { letter-spacing: 0; }
html[lang="ar"] .wordmark { font-family: "IBM Plex Sans", sans-serif; }
.lang-switch { color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border: 1px solid var(--ink-line); border-radius: 4px; }
.lang-switch:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.lang-switch[lang="ar"] { font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; }
.lang-switch[lang="en"] { font-family: "IBM Plex Sans", sans-serif; }
[dir="rtl"] .text-link .arr, [dir="rtl"] .more .arr, [dir="rtl"] .src .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .slider-dots button[aria-current="true"]::after { transform-origin: right; }
[dir="rtl"] .lifecycle > div::after { inset-inline-end: -7px; }
@media (max-width: 480px) { .lang-switch { padding: 7px 9px; font-size: 13.5px; } }

/* Figures such as "350+" keep their left-to-right order inside Arabic text */
[dir="rtl"] .figure-band .n, [dir="rtl"] .figs .n, [dir="rtl"] .bigfig b, [dir="rtl"] .pslide .vis .bars b, [dir="rtl"] .facts .n, [dir="rtl"] .lrow .cnt { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .lrow .cnt { text-align: left; }

/* Language menu */
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--ink-line); background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lang-btn:hover, .lang-menu.open .lang-btn { border-color: rgba(255, 255, 255, .45); }
.lang-list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 170px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 36px rgba(6, 22, 46, .25); z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.lang-menu.open .lang-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.lang-opt { display: block; padding: 9px 12px; border-radius: 4px; color: var(--text); text-decoration: none; font-size: 15px; }
a.lang-opt:hover { background: var(--bg-alt); color: var(--link); }
.lang-opt[aria-current] { color: var(--heading); font-weight: 600; background: var(--bg-alt); }
.lang-opt[lang="ar"] { font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; }
.lang-opt[lang="en"], .lang-opt[lang="ru"], .lang-opt[lang="fr"], .lang-btn { font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; }
@media (max-width: 480px) { .lang-btn { padding: 0 9px; } }

/* Header fit for longer languages (Russian) */
.nav-actions .btn { white-space: nowrap; }
@media (max-width: 1400px) { .nav-link { padding-inline: 9px; } .nav-actions .btn { padding-inline: 16px; } }
/* Russian and French labels are longer: tighten the header instead of hiding the button */
@media (max-width: 1440px) { html[lang="ru"] .nav-link, html[lang="fr"] .nav-link { padding-inline: 7px; font-size: 14.5px; } html[lang="ru"] .wordmark, html[lang="fr"] .wordmark { font-size: 15px; } html[lang="ru"] .brand img, html[lang="fr"] .brand img { height: 50px; } }
@media (max-width: 1320px) { html[lang="ru"] .nav-link, html[lang="fr"] .nav-link { padding-inline: 5px; font-size: 14px; } html[lang="ru"] .nav-actions .btn, html[lang="fr"] .nav-actions .btn { padding-inline: 12px; font-size: 14px; } }
.lang-btn svg { flex: none; width: 16px; height: 16px; max-width: none; }
.nav-actions { flex: none; }

/* ==========================================================================
   Refresh, October 2026: photo hero with enquiry card, italic accents,
   statement band, "at a glance", Contact link and sticky demonstration button
   ========================================================================== */

/* Italic serif accent used for a few words in key headings */
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-serif-italic-400.woff2") format("woff2"); }
.accent { font-family: "IBM Plex Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--link); }
.home-hero .accent, .statement-band .accent, .close-band .accent { color: #5CC2EA; }
html[lang="ar"] .accent { font-family: inherit; font-style: normal; font-weight: 600; }

/* Header: plain Contact link instead of a boxed button */
.contact-link { display: inline-flex; align-items: center; gap: 7px; color: #5CC2EA; font-weight: 600; font-size: 15.5px; text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.contact-link:hover, .contact-link[aria-current="page"] { color: #fff; }
.contact-link .ext { transition: transform .2s ease; }
.contact-link:hover .ext { transform: translate(2px, -2px); }
[dir="rtl"] .contact-link .ext { transform: scaleX(-1); }

/* Home hero */
.home-hero { background: #071526; }
/* Hero background: photo (always), video (larger screens), navy shade on top */
.home-hero .hero-photo { position: absolute; inset: -2%; background: var(--photo-lg) 50% 60% / cover no-repeat; transform-origin: 55% 60%; animation: hero-drift 28s ease-in-out infinite alternate; will-change: transform; }
@media (max-width: 900px) { .home-hero .hero-photo { background-image: var(--photo-sm); } }
@keyframes hero-drift { from { transform: scale(1.02) translate3d(-1%, 0, 0); } to { transform: scale(1.09) translate3d(1.2%, -1%, 0); } }
.home-hero .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; transition: opacity 1.2s ease; }
.home-hero .hero-video.is-playing { opacity: 1; }
.home-hero .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 14, 30, .92) 0%, rgba(5, 14, 30, .78) 46%, rgba(5, 14, 30, .5) 100%), linear-gradient(0deg, rgba(5, 14, 30, .75), rgba(5, 14, 30, 0) 42%), linear-gradient(180deg, rgba(5, 14, 30, .55), rgba(5, 14, 30, 0) 22%); }
[dir="rtl"] .home-hero .hero-shade { background: linear-gradient(270deg, rgba(5, 14, 30, .92) 0%, rgba(5, 14, 30, .78) 46%, rgba(5, 14, 30, .5) 100%), linear-gradient(0deg, rgba(5, 14, 30, .75), rgba(5, 14, 30, 0) 42%), linear-gradient(180deg, rgba(5, 14, 30, .55), rgba(5, 14, 30, 0) 22%); }
@media (max-width: 1100px) { .home-hero .hero-shade { background: linear-gradient(180deg, rgba(5, 14, 30, .62) 0%, rgba(5, 14, 30, .8) 50%, rgba(5, 14, 30, .94) 100%); } }
@media (prefers-reduced-motion: reduce) { .home-hero .hero-photo { animation: none; transform: none; inset: 0; } .home-hero .hero-video { display: none; } }
.home-hero .wrap.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .8fr); gap: 56px; align-items: center; padding-block: 64px 56px; }
.home-hero h1 { font-size: clamp(40px, 4.6vw, 66px); max-width: 15ch; line-height: 1.04; }
.home-hero h1 em.accent { font-size: 1.04em; }
.home-hero .lede { margin-top: 22px; max-width: 46ch; }
.home-hero .hero-strong { color: #fff; font-weight: 500; margin-top: 14px; font-size: 16.5px; }
.home-hero .btns { margin-top: 26px; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }
.hero-figs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hero-figs a { display: block; padding: 18px 16px 16px; text-decoration: none; color: #C9D7E8; transition: background .2s ease; }
.hero-figs a + a { border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.hero-figs a:hover { background: rgba(255, 255, 255, .05); }
.hero-figs b { display: block; color: #fff; font-size: clamp(24px, 2.3vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.hero-figs span { display: block; font-size: 13px; line-height: 1.4; margin-top: 6px; }
[dir="rtl"] .hero-figs b { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Enquiry card */
.hero-form { background: rgba(14, 32, 58, .72); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 26px 26px 20px; gap: 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.hero-form .hf-title { color: #fff; font-size: 23px; text-align: center; margin-bottom: 4px; }
.hero-form label, .hero-form .lbl { color: #E4ECF6; font-size: 13.5px; }
.hero-form input, .hero-form select, .hero-form textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; padding: 10px 12px; font-size: 15px; }
.hero-form input::placeholder, .hero-form textarea::placeholder { color: rgba(228, 236, 246, .55); }
.hero-form select option { color: #162233; }
.hero-form textarea { min-height: 84px; }
.hero-form .err { color: #FFB4B4; }
.hero-form .form-status.ok { color: #D9F99D; }
.hero-form .hf-note { color: #9FB3C9; font-size: 12.5px; text-align: center; margin: 0; }
.btn-block { width: 100%; justify-content: center; }

/* Document upload and NDA option (both forms) */
.file-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: var(--heading); }
.file-field .drop { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1.5px dashed var(--line-strong); border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--link); text-align: center; padding: 8px 12px; position: relative; transition: border-color .2s ease, background .2s ease; }
.file-field .drop:hover, .file-field .drop:focus-within { border-color: var(--blue); background: rgba(22, 143, 209, .05); }
.file-field input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; padding: 0; border: 0; }
.file-field .drop-text { display: inline-flex; align-items: center; gap: 8px; pointer-events: none; overflow-wrap: anywhere; }
.file-field .hint { font-weight: 400; font-size: 12.5px; color: var(--text-soft); }
.hero-form .file-field { color: #E4ECF6; font-size: 13.5px; }
.hero-form .file-field .drop { border-color: rgba(255, 255, 255, .3); color: #fff; min-height: 46px; }
.hero-form .file-field .hint { color: #9FB3C9; }
.form label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; cursor: pointer; }
.form label.check input { width: 18px; height: 18px; padding: 0; flex: none; accent-color: var(--blue); }
.hero-form label.check { color: #E4ECF6; font-size: 13.5px; }

@media (max-width: 1100px) {
  .home-hero .wrap.hero-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 48px; }
  .hero-form { max-width: 560px; }
}
@media (max-width: 700px) {
  .hero-figs { grid-template-columns: 1fr 1fr; }
  .hero-figs a:nth-child(3) { border-inline-start: 0; }
  .hero-figs a:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-form { padding: 22px 18px 16px; }
}

/* Centred statement band (dark) */
.statement-band { background: #071526; color: #C9D7E8; text-align: center; padding-block: 96px; position: relative; overflow: hidden; }
.statement-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(22, 143, 209, .18), transparent 70%); }
.statement-band .wrap { position: relative; max-width: 900px; }
.statement-band h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); }
.statement-band p { font-size: clamp(17px, 1.5vw, 20px); margin: 20px auto 30px; max-width: 60ch; }
@media (max-width: 700px) { .statement-band { padding-block: 72px; } }

/* About: at a glance */
.glance { background: var(--bg-alt); padding-block: 84px; }
.glance-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.glance h2 { font-size: clamp(34px, 3.8vw, 52px); }
.glance-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; }
.glance-facts > div { border-inline-start: 3px solid var(--blue); padding-inline-start: 18px; }
.glance-facts b { display: block; font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; color: var(--logo-blue); letter-spacing: -.02em; line-height: 1.1; }
:root[data-theme="dark"] .glance-facts b { color: #5CC2EA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glance-facts b { color: #5CC2EA; } }
.glance-facts span { display: block; margin-top: 6px; color: var(--text); font-weight: 500; }
[dir="rtl"] .glance-facts b { direction: ltr; unicode-bidi: isolate; text-align: right; }
.who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 48px; }
.who h2 { font-size: clamp(34px, 3.8vw, 52px); }
.who b { color: var(--heading); font-weight: 600; }
@media (max-width: 900px) { .glance-grid, .who { grid-template-columns: 1fr; gap: 28px; } .glance-facts { gap: 26px 24px; } }
@media (max-width: 520px) { .glance-facts { grid-template-columns: 1fr; } }

/* Sticky "Request a demonstration" button, bottom left */
.float-cta { position: fixed; inset-inline-start: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: #0E2038; color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-inline-start: 0; padding: 13px 22px; font-weight: 600; font-size: 15px; text-decoration: none; border-start-end-radius: 6px; border-end-end-radius: 6px; box-shadow: 0 10px 30px rgba(0, 20, 50, .3); transition: background .2s ease, padding .2s ease; }
.float-cta::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-inline-end: 10px; vertical-align: middle; }
.float-cta:hover { background: var(--logo-blue); color: #fff; padding-inline-start: 28px; }
@media (max-width: 700px) { .float-cta { font-size: 13.5px; padding: 10px 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media print { .float-cta { display: none; } }
/* Phones: the Contact link moves into the menu (Company › Contact) to keep the header on one line */
@media (max-width: 640px) { .contact-link { display: none; } }

/* ==========================================================================
   One design system (October 2026)
   Every dark surface uses the same deep-navy family; every page hero shows the
   West Bay skyline under the same shade; glass panels, corner radii, inputs and
   buttons share one set of values. Later rules here override earlier ones.
   ========================================================================== */
:root {
  --photo-lg: url("/assets/img/hero-poster.jpg");
  --photo-sm: url("/assets/img/hero-poster-sm.jpg");
  --ink-0: #06111F;            /* deepest: hero, statement and closing bands, footer */
  --ink-1: #0A1C33;            /* page heroes, dark sections */
  --ink-2: #10284A;            /* raised elements on dark */
  --ink-edge: rgba(255, 255, 255, .14);
  --accent-on-dark: #5CC2EA;
  --radius: 10px;              /* cards, tiles, panels */
  --radius-ctl: 8px;           /* buttons and form fields */
  --radius-glass: 20px;        /* glass panels */
  --ink-bg: var(--ink-1); --ink-bg-2: var(--ink-0);
}
:root[data-theme="dark"] { --ink-bg: var(--ink-1); --ink-bg-2: var(--ink-0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-bg: var(--ink-1); --ink-bg-2: var(--ink-0); } }

/* Header: dark glass in the same navy */
.site-header { background: rgba(6, 17, 31, .86); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--ink-edge); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--ink-0); } }

/* Page heroes (inner pages and products): skyline under the same shade as the home hero */
.hero, .page-hero { background: linear-gradient(90deg, rgba(6, 17, 31, .95) 0%, rgba(6, 17, 31, .86) 50%, rgba(6, 17, 31, .72) 100%), var(--photo-sm) 50% 62% / cover no-repeat, var(--ink-0); }
[dir="rtl"] .hero, [dir="rtl"] .page-hero { background: linear-gradient(270deg, rgba(6, 17, 31, .95) 0%, rgba(6, 17, 31, .86) 50%, rgba(6, 17, 31, .72) 100%), var(--photo-sm) 50% 62% / cover no-repeat, var(--ink-0); }
.hero .motif, .page-hero .motif { opacity: .06; }
.hero h1 em, .page-hero h1 em { color: var(--accent-on-dark); }

/* Dark bands: one treatment */
.statement-band, .close-band, .site-footer { background: var(--ink-0); }
.close-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 90% at 85% 0%, rgba(22, 143, 209, .16), transparent 70%); pointer-events: none; }
.close-band .motif { opacity: .06; }
.close-band .wrap { z-index: 1; }
.section.ink { background: var(--ink-1); }
.site-footer { border-top: 1px solid var(--ink-edge); }

/* Raised elements on dark use the same glass edge */
.figs > div { background: var(--ink-2); border: 1px solid var(--ink-edge); }
.float-cta { background: rgba(16, 40, 74, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--ink-edge); }

/* Shared shapes */
.btn { border-radius: var(--radius-ctl); }
.form input, .form select, .form textarea { border-radius: var(--radius-ctl); }
.file-field .drop { border-radius: var(--radius-ctl); }
.theme-btn, .lang-btn, .menu-btn { border-radius: var(--radius-ctl); }
.lang-list, .mega { border-radius: var(--radius); }
.tabs button { border-radius: var(--radius-ctl) var(--radius-ctl) 0 0; }

/* ---- Liquid-glass enquiry card ------------------------------------------ */
.hero-form {
  position: relative; overflow: hidden; border-radius: var(--radius-glass);
  background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .09) 100%);
  border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(12px) saturate(175%); backdrop-filter: blur(12px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 8, 20, .45);
}
/* light catching the top edge, like real glass */
.hero-form::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 60% at 15% -10%, rgba(255, 255, 255, .22), transparent 55%), radial-gradient(80% 50% at 110% 110%, rgba(92, 194, 234, .12), transparent 60%); }
.hero-form > * { position: relative; }
.hero-form .hf-title, .hero-form label, .hero-form .lbl { text-shadow: 0 1px 12px rgba(0, 8, 20, .35); }
.hero-form input, .hero-form select, .hero-form textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-form input:focus, .hero-form select:focus, .hero-form textarea:focus { background: rgba(255, 255, 255, .13); border-color: var(--accent-on-dark); outline: 2px solid rgba(92, 194, 234, .3); }
.hero-form .file-field .drop { background: rgba(255, 255, 255, .04); }
.hero-form .hf-note { color: #B6C7DB; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-form { background: rgba(10, 28, 51, .88); } }
/* let more of the video show around and through the card */
.home-hero .hero-shade { background: linear-gradient(90deg, rgba(6, 17, 31, .92) 0%, rgba(6, 17, 31, .76) 44%, rgba(6, 17, 31, .34) 100%), linear-gradient(0deg, rgba(6, 17, 31, .72), rgba(6, 17, 31, 0) 40%), linear-gradient(180deg, rgba(6, 17, 31, .5), rgba(6, 17, 31, 0) 22%); }
[dir="rtl"] .home-hero .hero-shade { background: linear-gradient(270deg, rgba(6, 17, 31, .92) 0%, rgba(6, 17, 31, .76) 44%, rgba(6, 17, 31, .34) 100%), linear-gradient(0deg, rgba(6, 17, 31, .72), rgba(6, 17, 31, 0) 40%), linear-gradient(180deg, rgba(6, 17, 31, .5), rgba(6, 17, 31, 0) 22%); }
@media (max-width: 1100px) { .home-hero .hero-shade, [dir="rtl"] .home-hero .hero-shade { background: linear-gradient(180deg, rgba(6, 17, 31, .62) 0%, rgba(6, 17, 31, .8) 50%, rgba(6, 17, 31, .92) 100%); } }
.home-hero, .statement-band { background-color: var(--ink-0); }

/* Phone numbers always read left to right, also on Arabic pages */
a[href^="tel:"] span[dir="ltr"] { unicode-bidi: isolate; }   /* the link itself keeps the page alignment */