/* =====================================================================================================
   GTS NextGen · Premium design system "Atlas"  (docs/design/README.md)
   Light canvas + dark navy "stages" + GTS signal yellow. Logical properties only (RTL/LTR), no inline styles (CSP),
   motion respects prefers-reduced-motion, content never depends on JavaScript to be visible.
   1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Components · 6 Header · 7 Footer · 8 Sections · 9 Motion
   ===================================================================================================== */

/* 1 ─ Fonts (self-hosted, OFL) */
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

/* 2 ─ Tokens */
:root {
  /* brand palette */
  --navy-950: #040c18; --navy-900: #071a33; --navy-800: #0b2a4a; --navy-700: #123a63; --navy-600: #1b4e82; --navy-300: #9db4cf;
  --signal: #fdca0a; --signal-600: #e3b200; --signal-soft: #fff4c4;
  --gts-red: #9a1d2e; --gts-red-soft: #fbe9eb;
  --electric: #3b7bff; --cyan: #29c9f0; --teal: #19c4a8;
  /* semantic (light) */
  --canvas: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f8; --surface-3: #e4eaf3;
  --ink: #0a1a2e; --ink-2: #33455c; --ink-3: #56677d; --ink-4: #8c9aad;
  --line: #e1e7f0; --line-2: #cdd6e3;
  --link: #1b56c9; --focus: #3b7bff;
  --ok: #148a5b; --warn: #a76a00; --danger: #b42318;
  --accent: #3b7bff;
  /* stage (dark sections, always dark) */
  --stage-bg: #071a33; --stage-ink: #eef4fc; --stage-ink-2: #b6c6db; --stage-line: rgba(255, 255, 255, .12); --stage-surface: rgba(255, 255, 255, .06);
  /* typography */
  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.55rem, 1.5rem + 4.4vw, 5rem);
  --fs-h1: clamp(2.2rem, 1.45rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
  --fs-lede: clamp(1.06rem, 1rem + .35vw, 1.3rem);
  --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem;
  --lh-tight: 1.04; --lh-head: 1.12; --lh-body: 1.65;
  --track-display: -.035em; --track-head: -.02em;
  /* spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section-y: clamp(64px, 3rem + 4.5vw, 120px);
  /* layout */
  --container: 1240px; --container-wide: 1400px; --container-narrow: 820px; --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;
  /* shape & depth */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(7, 26, 51, .06), 0 2px 8px -2px rgba(7, 26, 51, .06);
  --shadow-2: 0 2px 6px rgba(7, 26, 51, .05), 0 18px 40px -18px rgba(7, 26, 51, .22);
  --shadow-3: 0 30px 80px -30px rgba(7, 26, 51, .45);
  --glow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 90px -20px rgba(59, 123, 255, .35);
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; --dur-4: 1100ms;
  --reveal-y: 22px;
  color-scheme: light;
}
/* Arabic: its own display face, no negative tracking, taller lines, slightly larger body text */
:root:lang(ar) {
  --font-display: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Inter Tight", "Segoe UI", Tahoma, sans-serif;
  --track-display: 0; --track-head: 0; --lh-tight: 1.28; --lh-head: 1.36; --lh-body: 1.9;
  --fs-hero: clamp(2.2rem, 1.35rem + 3.6vw, 4.1rem); --fs-h1: clamp(1.95rem, 1.3rem + 2.6vw, 3.2rem); --fs-h2: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-body: 1.09rem;
}
/* product identities (accent used sparingly: dots, glows, illustrative visuals) */
[data-accent="erp"] { --accent: #3b7bff; } [data-accent="hrms"] { --accent: #14b8a6; } [data-accent="crm"] { --accent: #8b5cf6; }
[data-accent="pos"] { --accent: #f59e0b; } [data-accent="fam"] { --accent: #0ea5e9; } [data-accent="pms"] { --accent: #e11d48; }
[data-accent="support"] { --accent: #22c55e; } [data-accent="ecommerce"] { --accent: #f97316; } [data-accent="ess"] { --accent: #06b6d4; }
[data-accent="jofawtarah"] { --accent: #fdca0a; }

:root[data-theme="dark"] {
  --canvas: #050e1c; --surface: #0b1a2f; --surface-2: #0f2139; --surface-3: #142a47;
  --ink: #edf3fb; --ink-2: #c4d1e2; --ink-3: #93a5bd; --ink-4: #6c7f98;
  --line: #1a2c46; --line-2: #24395a; --link: #8ab4ff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 20px 50px -24px rgba(0, 0, 0, .7); --shadow-3: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --stage-bg: #030a14;
  color-scheme: dark;
}

/* 3 ─ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
:root:lang(ar) h3 { letter-spacing: 0; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--signal); color: var(--navy-900); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-sm); background: var(--signal); color: var(--navy-900); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.preview-bar { position: sticky; top: 0; z-index: 150; padding: 8px 16px; background: var(--signal); color: var(--navy-900); font-weight: 600; font-size: var(--fs-sm); text-align: center; }
.preview-anchor { display: block; height: 0; scroll-margin-top: 90px; }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* 4 ─ Layout */
.p-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.p-container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.p-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.p-section { position: relative; padding-block: var(--section-y); }
.p-section--tight { padding-block: calc(var(--section-y) * .6); }
.p-section + .p-section:not([data-appearance="stage"]):not([data-appearance="aurora"]):not([data-appearance="tint"]) { padding-block-start: calc(var(--section-y) * .55); }
/* section backgrounds (CMS: "Section background") */
.p-section[data-appearance="light"] { background: var(--surface); }
.p-section[data-appearance="tint"] { background: linear-gradient(180deg, var(--surface-2), var(--canvas)); }
.p-section[data-appearance="stage"], .p-section[data-appearance="aurora"], .p-stage {
  --ink: var(--stage-ink); --ink-2: var(--stage-ink-2); --ink-3: #8ea3bf; --line: var(--stage-line); --surface: var(--stage-surface); --surface-2: rgba(255, 255, 255, .04); --link: #9cc0ff;
  background: var(--stage-bg); color: var(--stage-ink); isolation: isolate; overflow: hidden;
}
.p-section[data-appearance="aurora"]::before, .p-stage--aurora::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 30%, rgba(59, 123, 255, .38), transparent 70%),
    radial-gradient(35% 45% at 82% 20%, rgba(41, 201, 240, .22), transparent 70%),
    radial-gradient(30% 40% at 60% 85%, rgba(253, 202, 10, .14), transparent 70%);
  filter: blur(10px);
}
.p-grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%); }

/* 5 ─ Components */
.p-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s-4); font: 600 var(--fs-xs)/1.2 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:root:lang(ar) .p-eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.p-eyebrow .pi-dia, .p-eyebrow > svg { width: 12px; height: 12px; color: var(--signal); --dia-hole: var(--canvas); }
.p-stage .p-eyebrow > svg, [data-appearance="stage"] .p-eyebrow > svg, [data-appearance="aurora"] .p-eyebrow > svg { --dia-hole: var(--stage-bg); }
.p-eyebrow .p-num { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
:root:lang(ar) .p-lede { line-height: 1.85; }
.p-head { display: grid; gap: var(--s-4); margin-block-end: clamp(32px, 4vw, 56px); max-width: 860px; }
.p-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.p-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--s-5) var(--s-8); }
@media (max-width: 900px) { .p-head--split { grid-template-columns: 1fr; } }
.p-mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--signal) 70%, transparent) 62%); padding-inline: .06em; color: inherit; }
.p-stage .p-mark, [data-appearance="stage"] .p-mark, [data-appearance="aurora"] .p-mark { background: none; color: var(--signal); }
.pi { width: 20px; height: 20px; flex: none; }
.pi--sm { width: 16px; height: 16px; } .pi--lg { width: 28px; height: 28px; }
[dir="rtl"] .pi--dir { transform: scaleX(-1); }

/* buttons: primary (signal), dark, ghost, link */
.p-btn { --b-bg: var(--surface); --b-ink: var(--ink); --b-line: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1px solid var(--b-line); background: var(--b-bg); color: var(--b-ink); font: 600 var(--fs-sm)/1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2); white-space: nowrap; }
.p-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.p-btn:active { transform: translateY(0); }
.p-btn .pi { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.p-btn:hover .pi--dir { transform: translateX(3px); }
[dir="rtl"] .p-btn:hover .pi--dir { transform: scaleX(-1) translateX(3px); }
.p-btn--primary { --b-bg: var(--signal); --b-ink: var(--navy-900); --b-line: transparent; box-shadow: 0 10px 30px -12px rgba(253, 202, 10, .7); }
.p-btn--primary:hover { --b-bg: #ffd633; }
.p-btn--dark { --b-bg: var(--navy-800); --b-ink: #fff; --b-line: transparent; }
.p-btn--ghost { --b-bg: transparent; --b-ink: var(--ink); --b-line: var(--line-2); }
.p-stage .p-btn--ghost, [data-appearance="stage"] .p-btn--ghost, [data-appearance="aurora"] .p-btn--ghost { --b-line: rgba(255, 255, 255, .28); --b-ink: #fff; }
.p-btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--fs-xs); }
.p-btn--block { width: 100%; }
.p-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.p-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: none; }
.p-link .pi { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.p-link:hover .pi--dir { transform: translateX(4px); }
[dir="rtl"] .p-link:hover .pi--dir { transform: scaleX(-1) translateX(4px); }
.p-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.p-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--signal-soft); color: #6b4f00; }
.p-illus-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-block-start: var(--s-3); }
.p-illus-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }

/* cards */
.p-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.p-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.p-card--glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); box-shadow: none; }
.p-icon-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--navy-700); }
:root[data-theme="dark"] .p-icon-tile, .p-stage .p-icon-tile, [data-appearance="stage"] .p-icon-tile, [data-appearance="aurora"] .p-icon-tile { color: var(--signal); }
.p-icon-tile .pi { width: 24px; height: 24px; }
.p-hero .p-icon-tile, .p-phero .p-icon-tile, .p-flow__diagram .p-icon-tile, .p-contact-vis .p-icon-tile { color: var(--signal); }

/* 6 ─ Header (glass, sticky) */
.p-header { position: sticky; top: 0; z-index: 100; }
.p-utility { background: var(--navy-900); color: #b8c8dd; font-size: 12.5px; }
.p-utility__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 36px; }
.p-utility ul { display: flex; gap: var(--s-5); list-style: none; }
.p-utility a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.p-utility a:hover { color: #fff; }
.p-utility .pi { width: 14px; height: 14px; opacity: .8; }
.p-bar { background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: saturate(160%) blur(16px); border-block-end: 1px solid transparent; transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); }
.p-header.is-scrolled .p-bar { border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(7, 26, 51, .35); background: color-mix(in srgb, var(--canvas) 92%, transparent); }
.p-bar__in { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.p-brand img { width: 92px; height: auto; }
:root[data-theme="dark"] .p-brand { background: #fff; border-radius: 10px; padding: 4px 8px; }
.p-nav { flex: 1; }
.p-nav__list { display: flex; justify-content: center; gap: 2px; list-style: none; }
.p-nav__item { position: relative; }
.p-nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border: 0; background: none; border-radius: var(--r-pill); color: var(--ink); font-size: var(--fs-sm); font-weight: 550; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1); }
.p-nav__link:hover, .p-nav__link[aria-expanded="true"] { background: var(--surface-2); }
.p-nav__link .pi { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease-out); opacity: .7; }
.p-nav__link[aria-expanded="true"] .pi { transform: rotate(180deg); }
.p-mega { position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; translate: -50% 0; z-index: 10; width: max-content; max-width: min(760px, 92vw);
  padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
[dir="rtl"] .p-mega { translate: 50% 0; }
.p-nav__item.is-open .p-mega, .p-nav__item:focus-within .p-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .p-nav__item.has-mega:hover .p-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.p-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 2px; }
.p-mega__grid.is-wide { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
.p-mega__link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background-color var(--dur-1); }
.p-mega__link:hover { background: var(--surface-2); }
.p-mega__link strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.p-mega__link small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.p-mega__dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 3px; rotate: 45deg; flex: none; background: var(--accent, var(--line-2)); }
.p-mega__all { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.p-actions { display: flex; align-items: center; gap: 6px; }
.p-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1); text-decoration: none; }
.p-icon-btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.p-lang { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.p-lang:lang(ar) { font-family: "IBM Plex Sans Arabic", sans-serif; }
.p-lang:hover { border-color: var(--line-2); background: var(--surface-2); }
.p-burger { display: none; }
.p-burger__lines, .p-burger__lines::before, .p-burger__lines::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1); }
.p-burger__lines { position: relative; }
.p-burger__lines::before, .p-burger__lines::after { content: ""; position: absolute; inset-inline-start: 0; }
.p-burger__lines::before { top: -6px; } .p-burger__lines::after { top: 6px; }
.p-burger[aria-expanded="true"] .p-burger__lines { background: transparent; }
.p-burger[aria-expanded="true"] .p-burger__lines::before { transform: translateY(6px) rotate(45deg); }
.p-burger[aria-expanded="true"] .p-burger__lines::after { transform: translateY(-6px) rotate(-45deg); }
.p-drawer { position: fixed; inset: calc(var(--header-h) + 36px) 0 0; z-index: 99; overflow-y: auto; padding: var(--s-5) var(--gutter) var(--s-8); background: var(--canvas); border-block-start: 1px solid var(--line); }
.p-drawer ul { list-style: none; }
.p-drawer > ul > li { border-block-end: 1px solid var(--line); padding-block: 10px; }
.p-drawer__top { display: block; padding: 8px 0; font: 650 1.15rem/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.p-drawer ul ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding-block: 4px 8px; }
.p-drawer ul ul a { display: block; padding: 6px 0; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
.p-drawer .p-btn { margin-top: var(--s-5); }
@media (max-width: 1279px) {
  .p-nav { display: none; }
  .p-burger { display: inline-grid; }
  .p-bar__in { justify-content: space-between; }
}
@media (max-width: 640px) {
  /* one compact line: phone + the two sign-in links (e-mail stays in the footer and on Contact) */
  .p-utility { font-size: 12px; }
  .p-utility__in { gap: var(--s-3); }
  .p-utility ul { gap: var(--s-3); }
  .p-utility a { white-space: nowrap; }
  .p-utility__contact li:has(a[href^="mailto:"]) { display: none; }
  .p-utility__contact { gap: var(--s-4); }
  .p-header__cta { display: none; }
  .p-actions .p-icon-btn[href] { display: none; }
  .p-drawer ul ul { grid-template-columns: 1fr; }
}

/* 7 ─ Footer */
.p-footer { position: relative; overflow: hidden; background: var(--navy-950); color: #9fb2ca; padding-block: clamp(56px, 7vw, 96px) var(--s-6); font-size: var(--fs-sm); isolation: isolate; }
.p-footer__glow { position: absolute; inset: auto -10% -40% 30%; height: 80%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(59, 123, 255, .22), transparent 70%); }
.p-footer a { color: #d7e2f0; text-decoration: none; }
.p-footer a:hover { color: #fff; text-decoration: underline; }
.p-footer__top { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(140px, 1fr)); gap: var(--s-7) var(--s-6); }
.p-footer__logo { display: inline-block; padding: 8px 12px; border-radius: 12px; background: #fff; margin-block-end: var(--s-4); }
.p-footer__logo img { width: 104px; }
.p-footer__brand p { max-width: 34ch; line-height: 1.7; }
.p-footer__markets { display: flex; gap: 8px; align-items: center; margin-top: var(--s-3); color: #7f93ad; font-size: var(--fs-xs); }
.p-footer h2 { font: 700 12px/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-block-end: var(--s-4); }
:root:lang(ar) .p-footer h2 { letter-spacing: 0; font-size: 14px; }
.p-footer ul { list-style: none; display: grid; gap: 10px; }
.p-footer dl { margin: 0; display: grid; gap: 4px; }
.p-footer dt { color: #6f84a0; font-size: 12px; margin-top: 8px; }
.p-footer dd { margin: 0; color: #d7e2f0; }
.p-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-xs); }
.p-footer__bottom ul { display: flex; gap: var(--s-5); }
.p-footer__credit a { color: #fff; font-weight: 700; border-bottom: 2px solid var(--signal); }
@media (max-width: 1024px) { .p-footer__top { grid-template-columns: 1fr 1fr; } .p-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .p-footer__top { grid-template-columns: 1fr; } }

/* 8 ─ Sections ----------------------------------------------------------------------------------------- */

/* 8.1 Hero (stage) */
.p-hero { position: relative; padding-block: clamp(56px, 6vw, 96px) clamp(64px, 7vw, 112px); background: var(--stage-bg); color: var(--stage-ink); overflow: hidden; isolation: isolate; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(55% 70% at 85% 30%, rgba(59, 123, 255, .35), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(41, 201, 240, .18), transparent 70%), radial-gradient(30% 40% at 60% 0%, rgba(253, 202, 10, .12), transparent 70%), linear-gradient(180deg, #071a33, #04101f); }
.p-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 70% 40%, #000 20%, transparent 75%); }
.p-hero__in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p-hero h1 { font-size: var(--fs-hero); color: #fff; }
.p-hero h1 .p-mark { background: none; color: var(--signal); }
.p-hero .p-eyebrow { color: #a8bbd3; }
.p-hero .p-eyebrow > svg { --dia-hole: #071a33; }
.p-hero__lede { margin-top: var(--s-5); font-size: var(--fs-lede); line-height: 1.65; color: #c3d1e3; max-width: 56ch; }
.p-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.p-hero__ctas .p-btn--ghost { --b-line: rgba(255, 255, 255, .28); --b-ink: #fff; --b-bg: rgba(255, 255, 255, .04); }
.p-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12); color: #9fb3cc; font-size: var(--fs-sm); }
.p-hero__meta li { display: flex; align-items: center; gap: 8px; list-style: none; }
.p-hero__meta .pi { color: var(--signal); width: 18px; height: 18px; }
.p-hero__visual { position: relative; }
.p-hero__fade { position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, var(--canvas)); pointer-events: none; opacity: 0; }
@media (max-width: 980px) { .p-hero__in { grid-template-columns: 1fr; } .p-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; } }

/* network visual (illustration) */
.p-net { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.p-net svg { width: 100%; height: 100%; overflow: visible; }
.p-net .net-ring { fill: none; stroke: rgba(157, 180, 207, .22); stroke-width: 1; stroke-dasharray: 2 6; }
.p-net .net-ring--2 { stroke: rgba(157, 180, 207, .14); }
.p-net .net-link { fill: none; stroke: rgba(157, 196, 255, .28); stroke-width: 1.2; transition: stroke var(--dur-2), stroke-width var(--dur-2); }
.p-net .net-pulse { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 3 400; animation: net-pulse 3.6s linear infinite; opacity: .95; }
.p-net .net-node rect { fill: rgba(11, 31, 56, .92); stroke: rgba(157, 196, 255, .32); transition: stroke var(--dur-2), fill var(--dur-2); }
.p-net .net-node text { fill: #dbe6f4; font: 600 12.5px var(--font-text); }
.p-net .net-node .net-dot { fill: var(--accent, var(--cyan)); }
.p-net .net-node { cursor: pointer; }
.p-net .net-node:hover rect, .p-net .net-node:focus rect, .p-net .net-node.is-active rect { stroke: var(--accent, var(--signal)); fill: rgba(16, 42, 74, .98); }
.p-net .net-core-glow { fill: url(#net-glow); }
.p-net .net-core { fill: var(--signal); }
.p-net .net-core-hole { fill: #071a33; }
.p-net .net-core-label { fill: #fff; font: 800 16px var(--font-display); text-anchor: middle; }
.p-net .net-core-sub { fill: #9fb3cc; font: 600 11px var(--font-text); text-anchor: middle; letter-spacing: .12em; }
:root:lang(ar) .p-net .net-core-sub { letter-spacing: 0; font-size: 12px; }
.p-net .net-spin { transform-origin: 300px 300px; animation: net-spin 120s linear infinite; }
.p-net .net-pulse.d0 { animation-delay: 0.00s; } .p-net .net-pulse.d1 { animation-delay: 0.36s; } .p-net .net-pulse.d2 { animation-delay: 0.72s; } .p-net .net-pulse.d3 { animation-delay: 1.08s; } .p-net .net-pulse.d4 { animation-delay: 1.44s; } .p-net .net-pulse.d5 { animation-delay: 1.80s; } .p-net .net-pulse.d6 { animation-delay: 2.16s; } .p-net .net-pulse.d7 { animation-delay: 2.52s; } .p-net .net-pulse.d8 { animation-delay: 2.88s; } .p-net .net-pulse.d9 { animation-delay: 3.24s; } 
.p-net .net-link.is-active { stroke: color-mix(in srgb, var(--signal) 70%, transparent); stroke-width: 1.8; }
.p-net__list { display: none; }
@media (max-width: 640px) {
  .p-net { aspect-ratio: auto; }
  .p-net svg { aspect-ratio: 1; max-width: 300px; margin-inline: auto; }
  .p-net .net-node, .p-net .net-core-label, .p-net .net-core-sub { display: none; }
  .p-net__tip { display: none; }
  .p-net__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin-top: 8px; }
  .p-net__list a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #e3ebf6; font-size: 13px; font-weight: 600; text-decoration: none; }
  .p-net__list .p-mega__dot { margin: 0; width: 8px; height: 8px; }
}
@keyframes net-pulse { from { stroke-dashoffset: 403; } to { stroke-dashoffset: 0; } }
@keyframes net-spin { to { transform: rotate(360deg); } }
.p-net__tip { position: absolute; inset-inline: 8% 8%; bottom: 0; padding: 14px 16px; border-radius: var(--r-md); background: rgba(7, 26, 51, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); color: #dbe6f4; font-size: var(--fs-sm); min-height: 74px; }
.p-net__tip strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 2px; }
.p-net__tip span { color: #a8bbd3; }

/* 8.2 Facts / stats strip */
.p-facts { position: relative; margin-top: calc(var(--section-y) * -.5); z-index: 2; }
.p-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.p-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: clamp(20px, 2.4vw, 30px); border-inline-end: 1px solid var(--line); }
.p-fact dd, .p-fact dt { margin: 0; }
.p-fact__value--text { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem) !important; letter-spacing: -.01em; }
.p-fact:last-child { border-inline-end: 0; }
.p-fact__value { font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--font-display); letter-spacing: var(--track-head); color: var(--ink); }
.p-fact__label { font-size: var(--fs-sm); color: var(--ink-3); }
.p-fact--pending .p-fact__value { color: var(--ink-3); font-size: 1rem; font-family: var(--font-text); font-weight: 600; }
@media (max-width: 720px) { .p-fact { border-inline-end: 0; border-block-end: 1px solid var(--line); } }

/* 8.3 Product showcase (interactive tabs) */
.p-show { display: grid; grid-template-columns: minmax(250px, .38fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.p-show__tabs { display: grid; gap: 4px; }
.p-show__panels { position: sticky; top: calc(var(--header-h) + 24px); }
.p-show__tab { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid transparent; background: none; text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2); }
.p-show__tab:hover { background: var(--surface); border-color: var(--line); }
.p-show__tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-2); }
.p-show__tab[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--accent); }
.p-show__dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 3px; rotate: 45deg; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.p-show__name { font-weight: 650; color: var(--ink); font-size: var(--fs-sm); }
.p-show__tag { font-size: 12.5px; color: var(--ink-3); }
.p-show__panel { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.p-show__panel:focus-visible { outline-offset: 6px; }
.p-show__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.p-show__copy { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--s-4); }
.p-show__copy h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; }
.p-show__copy p { color: var(--ink-2); }
.p-show__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
:root:lang(ar) .p-show__kicker { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.p-show__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 2px; rotate: 45deg; background: var(--accent); }
.p-show__mods { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.p-show__mods li { padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.p-show__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: auto; padding-top: var(--s-3); }
.p-show__art { position: relative; min-height: 380px; background: radial-gradient(70% 70% at 70% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), linear-gradient(160deg, #0b2a4a, #061528); overflow: hidden; display: grid; place-items: center; padding: 28px; }
.p-show__art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.p-show__art .p-illus-note { position: absolute; inset-inline-start: 18px; bottom: 12px; color: rgba(255, 255, 255, .55); margin: 0; }
.p-show__art .p-illus-note::before { background: rgba(255, 255, 255, .5); }
@media (max-width: 1080px) { .p-show { grid-template-columns: 1fr; } .p-show__panels { position: static; } .p-show__tabs { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .p-show__tab { scroll-snap-align: start; background: var(--surface); border-color: var(--line); } }
@media (max-width: 760px) { .p-show__body { grid-template-columns: 1fr; } .p-show__art { min-height: 300px; order: -1; } }

/* illustrative product interfaces (abstract: no product data, no fake numbers) */
.p-ui { position: relative; z-index: 1; width: min(100%, 440px); border-radius: 16px; background: rgba(248, 250, 253, .97); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); color: #0a1a2e; font-size: 12px; overflow: hidden; transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); transition: transform var(--dur-3) var(--ease-out); }
[dir="rtl"] .p-ui { transform: perspective(1200px) rotateY(6deg) rotateX(3deg); }
.p-show__panel:hover .p-ui { transform: perspective(1200px) rotateY(0) rotateX(0); }
.p-ui__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #eef2f8; border-bottom: 1px solid #e1e7f0; }
.p-ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd8e5; }
.p-ui__bar b { margin-inline-start: 8px; font-weight: 700; font-size: 11.5px; color: #33455c; }
.p-ui__body { display: grid; gap: 10px; padding: 14px; }
.p-ui__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #fff; border: 1px solid #e7ecf3; }
.p-ui__row strong { font-weight: 650; font-size: 12px; color: #12233a; }
.p-ui__sk { flex: 1; height: 7px; border-radius: 4px; background: #e6ebf2; }
.p-ui__sk--s { flex: 0 0 34%; }
.p-ui__pill { padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, #fff); color: color-mix(in srgb, var(--accent) 45%, #0a1a2e); white-space: nowrap; }
.p-ui__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: color-mix(in srgb, var(--accent) 80%, #0a1a2e); flex: none; }
.p-ui__ico .pi { width: 16px; height: 16px; }
.p-ui__bars { display: flex; align-items: flex-end; gap: 6px; height: 86px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #e7ecf3; }
.p-ui__bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); transform-origin: bottom; animation: ui-grow var(--dur-4) var(--ease-out) both; }
.p-ui__bars span:nth-child(2) { animation-delay: .08s; } .p-ui__bars span:nth-child(3) { animation-delay: .16s; } .p-ui__bars span:nth-child(4) { animation-delay: .24s; } .p-ui__bars span:nth-child(5) { animation-delay: .32s; } .p-ui__bars span:nth-child(6) { animation-delay: .4s; } .p-ui__bars span:nth-child(7) { animation-delay: .48s; }
.p-ui__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p-ui__col { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 10px; background: #eef2f8; min-height: 120px; }
.p-ui__col b { font-size: 10.5px; color: #5e6f85; font-weight: 700; }
.p-ui__card { height: 26px; border-radius: 7px; background: #fff; border: 1px solid #e1e7f0; border-inline-start: 3px solid var(--accent); }
.p-ui__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.p-ui__cell { aspect-ratio: 1; border-radius: 8px; background: #fff; border: 1px solid #e1e7f0; display: grid; place-items: center; }
.p-ui__cell.is-on { background: color-mix(in srgb, var(--accent) 20%, #fff); border-color: color-mix(in srgb, var(--accent) 50%, #fff); }
.p-ui__phone { width: 190px; margin-inline: auto; border-radius: 30px; padding: 10px; background: #0a1a2e; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
.p-ui__screen { border-radius: 22px; background: #f5f7fb; padding: 14px 10px; display: grid; gap: 8px; min-height: 300px; align-content: start; }
.p-ui__qr { width: 64px; height: 64px; border-radius: 6px; background:
  conic-gradient(from 90deg at 30% 30%, #0a1a2e 25%, transparent 0) 0 0 / 16px 16px, repeating-linear-gradient(90deg, #0a1a2e 0 4px, transparent 4px 8px), #fff; border: 4px solid #fff; outline: 1px solid #e1e7f0; }
.p-ui__bars span:nth-child(1) { height: 42%; } .p-ui__bars span:nth-child(2) { height: 58%; } .p-ui__bars span:nth-child(3) { height: 50%; } .p-ui__bars span:nth-child(4) { height: 72%; } .p-ui__bars span:nth-child(5) { height: 64%; } .p-ui__bars span:nth-child(6) { height: 86%; } .p-ui__bars span:nth-child(7) { height: 78%; }
.is-paused *, .is-paused::before, .is-paused::after { animation-play-state: paused !important; }
@keyframes ui-grow { from { transform: scaleY(.1); opacity: .3; } to { transform: none; opacity: 1; } }

/* 8.4 Spotlight */
.p-spot { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
.p-spot__tile { grid-column: span 4; display: flex; flex-direction: column; gap: var(--s-4); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); overflow: hidden; position: relative; }
.p-spot__tile--navy { grid-column: span 7; background: linear-gradient(150deg, #0b2a4a, #071a33); color: #eef4fc; border-color: transparent; }
.p-spot__tile--navy h3, .p-spot__tile--navy .p-spot__title { color: #fff; }
.p-spot__tile--maroon { grid-column: span 5; background: linear-gradient(160deg, #7c1626, #4c0d18); color: #fbe9eb; border-color: transparent; }
.p-spot__tile--maroon h3 { color: #fff; }
.p-spot__tile--yellow { grid-column: span 12; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); padding-block: clamp(22px, 2.6vw, 32px); background: var(--signal); color: var(--navy-900); border-color: transparent; }
.p-spot__tile--yellow h3 { color: var(--navy-900); }
.p-spot__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
:root:lang(ar) .p-spot__eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.p-spot__title { font: 700 clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem)/1.1 var(--font-display); letter-spacing: var(--track-head); }
.p-spot__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); list-style: none; counter-reset: s; margin-top: auto; }
.p-spot__steps li { counter-increment: s; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-sm); color: #c3d1e3; }
.p-spot__steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 700 12px var(--font-text); color: var(--signal); margin-bottom: 8px; }
.p-spot__steps strong { display: block; color: #fff; margin-bottom: 4px; }
.p-spot__img { margin-top: auto; border-radius: var(--r-md); overflow: hidden; }
.p-spot__img img { width: 100%; max-height: 220px; object-fit: contain; object-position: center bottom; }
.p-spot__tile .p-btn { align-self: flex-start; }
.p-spot__tile--yellow .p-spot__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.p-spot__tile--yellow .p-btn { align-self: center; }
@media (max-width: 760px) { .p-spot__tile--yellow { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .p-spot__tile, .p-spot__tile--navy { grid-column: span 12; grid-row: auto; } }
@media (max-width: 640px) { .p-spot__steps { grid-template-columns: 1fr; } }

/* 8.5 Finder */
.p-finder { display: grid; grid-template-columns: minmax(220px, .34fr) 1fr; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.p-finder__needs { padding: var(--s-5); background: var(--surface-2); border-inline-end: 1px solid var(--line); }
.p-finder__prompt { font: 650 1.05rem/1.3 var(--font-display); margin-bottom: var(--s-4); color: var(--ink); }
.p-finder__list { display: grid; gap: 4px; }
.p-finder__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: none; text-align: start; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.p-finder__btn:hover { background: var(--surface); color: var(--ink); }
.p-finder__btn[aria-selected="true"] { background: var(--navy-800); color: #fff; }
.p-finder__btn .pi { opacity: 0; transition: opacity var(--dur-1); }
.p-finder__btn[aria-selected="true"] .pi { opacity: 1; color: var(--signal); }
.p-finder__panel { padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--s-4); align-content: start; animation: fade-in var(--dur-3) var(--ease-out); }
.p-finder__intro { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.p-finder__rec { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--canvas); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); text-decoration: none; color: inherit; }
.p-finder__rec:hover { border-color: var(--line-2); transform: translateY(-2px); }
.p-finder__rec h3 { font-size: 1.1rem; }
.p-finder__rec p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 4px; }
@media (max-width: 860px) { .p-finder { grid-template-columns: 1fr; } .p-finder__needs { border-inline-end: 0; border-block-end: 1px solid var(--line); } .p-finder__list { grid-auto-flow: column; overflow-x: auto; } .p-finder__btn { white-space: nowrap; } .p-finder__rec { grid-template-columns: auto 1fr; } .p-finder__rec .p-link { grid-column: 2; } }

/* 8.6 Industries (interactive list) */
.p-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); list-style: none; }
.p-ind a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 96px; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-ind a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--signal) 14%, transparent), transparent 60%); opacity: 0; transition: opacity var(--dur-2); }
.p-ind a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.p-ind a:hover::before { opacity: 1; }
.p-ind strong { position: relative; font: 650 1.1rem/1.3 var(--font-display); }
.p-ind .p-badge { position: relative; }
.p-ind .pi { position: relative; color: var(--ink-3); }
@media (max-width: 900px) { .p-ind { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .p-ind { grid-template-columns: 1fr; } }

/* 8.7 Markets (stage) */
.p-markets { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p-markets__list { display: grid; gap: 10px; list-style: none; }
.p-markets__item { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 18px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.p-markets__item.is-home { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: rgba(253, 202, 10, .06); }
.p-markets__pin { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--signal); }
.p-markets__item strong { color: #fff; font-weight: 650; }
.p-markets__item span { color: #a8bbd3; font-size: var(--fs-sm); }
.p-markets__map { position: relative; aspect-ratio: 4 / 3; }
.p-markets__map svg { width: 100%; height: 100%; }
.p-markets__note { margin-top: var(--s-4); font-size: var(--fs-xs); color: #8ea3bf; }

/* 8.8 Services */
.p-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); counter-reset: svc; list-style: none; }
.p-service { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.p-service__letter { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--navy-800); color: var(--signal); font: 800 1.25rem var(--font-display); }
.p-service p { color: var(--ink-2); }
.p-service .p-link { margin-top: auto; }
@media (max-width: 960px) { .p-services { grid-template-columns: 1fr; } }

/* 8.9 Stack builder (stage) */
.stack-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-6); }
.stack-chip { padding: 12px 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); color: #e3ebf6; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
.stack-chip:hover { border-color: rgba(255, 255, 255, .45); }
.stack-chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--navy-900); }
.stack-chip[aria-pressed="true"]::before { content: "✓ "; }
.p-stack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.stack-panel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); }
.stack-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stack-head h3 { color: #fff; }
.stack-count { font-size: var(--fs-sm); color: var(--signal); font-weight: 600; }
.stack-core { display: flex; align-items: center; gap: 10px; margin-top: var(--s-4); padding: 12px 14px; border-radius: var(--r-md); background: rgba(253, 202, 10, .08); border: 1px dashed rgba(253, 202, 10, .45); color: #f3e3a3; font-size: var(--fs-sm); }
.stack-core svg { width: 14px; height: 14px; color: var(--signal); --dia-hole: #0b2038; }
.stack-list { list-style: none; display: grid; gap: 8px; margin: var(--s-4) 0 var(--s-5); min-height: 80px; }
.stack-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #a8bbd3; font-size: var(--fs-xs); animation: fade-in var(--dur-2) var(--ease-out); }
.stack-list li strong { color: #fff; font-size: var(--fs-sm); }
.stack-list .stack-empty { border-style: dashed; color: #8ea3bf; display: block; }
@media (max-width: 900px) { .p-stack { grid-template-columns: 1fr; } }

/* 8.10 Journal (post list) */
.p-journal { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); list-style: none; }
.p-post { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; height: 100%; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.p-post__img { aspect-ratio: 16 / 10; background: linear-gradient(140deg, #0b2a4a, #123a63); overflow: hidden; display: grid; place-items: center; }
.p-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.p-post:hover .p-post__img img { transform: scale(1.05); }
.p-post__img .pi-dia, .p-post__img svg { width: 28px; height: 28px; color: var(--signal); --dia-hole: #0f2f52; }
.p-post__body { display: grid; gap: 8px; padding: 18px 20px 22px; }
.p-post time { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.p-post h3 { font-size: 1.05rem; line-height: 1.4; }
@media (max-width: 1024px) { .p-journal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .p-journal { grid-template-columns: 1fr; } }

/* 8.11 Contact (convert) */
.p-convert { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.intent-tabs { display: grid; gap: 10px; margin-top: var(--s-6); }
.intent-tab { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-2), background-color var(--dur-1); }
.intent-tab:hover { border-color: var(--line-2); }
.intent-tab[aria-checked="true"] { border-color: var(--navy-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 45%, transparent); }
.intent-tab .radio { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); }
.intent-tab[aria-checked="true"] .radio { border: 5px solid var(--navy-800); }
:root[data-theme="dark"] .intent-tab[aria-checked="true"] .radio { border-color: var(--signal); }
.intent-tab strong { font-weight: 650; color: var(--ink); }
.intent-tab .desc { font-size: var(--fs-xs); color: var(--ink-3); }
.form-shell { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.form-title { font: 700 1.35rem/1.3 var(--font-display); margin-bottom: var(--s-5); color: var(--ink); }
.inquiry .fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.inquiry .field { display: grid; gap: 6px; }
.inquiry .field--full { grid-column: 1 / -1; }
.inquiry label { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); }
.inquiry input[type="text"], .inquiry input[type="email"], .inquiry input[type="tel"], .inquiry select, .inquiry textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--canvas); color: var(--ink); font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1); }
.inquiry textarea { resize: vertical; min-height: 120px; }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline: none; border-color: var(--navy-600); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--electric) 18%, transparent); }
.inquiry .consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; }
.inquiry .consent input { margin-top: 3px; accent-color: var(--navy-800); }
.inquiry .hp { position: absolute; inset-inline-start: -9999px; }
.form-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.form-status { font-size: var(--fs-sm); }
.form-status.is-ok { color: var(--ok); font-weight: 600; } .form-status.is-error { color: var(--danger); font-weight: 600; }
.inquiry .err { color: var(--danger); font-size: 12px; }
@media (max-width: 900px) { .p-convert { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .inquiry .fields { grid-template-columns: 1fr; } }

/* 8.12 Page hero (inner pages) */
.p-phero { position: relative; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px); background: var(--stage-bg); color: var(--stage-ink); overflow: hidden; isolation: isolate; }
.p-phero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 80% at 90% 10%, rgba(59, 123, 255, .3), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(41, 201, 240, .14), transparent 70%), linear-gradient(180deg, #071a33, #051325); }
.p-phero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 80% at 80% 30%, #000 10%, transparent 75%); }
.p-phero h1 { color: #fff; max-width: 20ch; }
.p-phero h1.p-phero__mid { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: 26ch; }
.p-phero h1.p-phero__long { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem); max-width: 34ch; line-height: 1.2; }
.p-phero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p-phero__in--solo { grid-template-columns: minmax(0, 1fr); }
.p-phero__lede { margin-top: var(--s-5); font-size: var(--fs-lede); color: #c3d1e3; max-width: 58ch; line-height: 1.65; }
.p-phero .p-hero__ctas { margin-top: var(--s-6); }
.p-crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: var(--s-5); list-style: none; font-size: var(--fs-xs); color: #8ea3bf; }
.p-crumbs a { color: #b6c6db; text-decoration: none; }
.p-crumbs a:hover { color: #fff; text-decoration: underline; }
.p-crumbs li + li::before { content: "/"; margin-inline-end: 10px; color: #4d6584; }
.p-phero__visual { position: relative; }
.p-phero__img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--glow); aspect-ratio: 16 / 10; }
.p-phero__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .p-phero__in { grid-template-columns: 1fr; } }

/* e-invoice flow illustration (hero + flow section) */
.p-einv { position: relative; display: grid; gap: var(--s-4); }
.p-einv__doc { position: relative; justify-self: center; width: min(100%, 360px); padding: 22px; border-radius: 18px; background: #fff; color: #0a1a2e; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); transform: rotate(-2deg); }
[dir="rtl"] .p-einv__doc { transform: rotate(2deg); }
.p-einv__band { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #0b2a4a; }
.p-einv__band b { font: 800 14px var(--font-display); color: #0b2a4a; }
.p-einv__band span { font-size: 10.5px; font-weight: 700; color: #6b7c92; }
.p-einv__lines { display: grid; gap: 8px; padding-block: 14px; }
.p-einv__line { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 11px; color: #33455c; }
.p-einv__line i { display: block; height: 7px; border-radius: 4px; background: #e6ebf2; }
.p-einv__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 12px; border-top: 1px dashed #cdd6e3; }
.p-einv__total { display: grid; gap: 6px; }
.p-einv__total i { display: block; width: 110px; height: 7px; border-radius: 4px; background: #e6ebf2; }
.p-einv__total i:last-child { width: 80px; background: #0b2a4a; }
.p-einv__stamp { position: absolute; inset-inline-end: -14px; top: -14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--signal); color: #0a1a2e; font-size: 11px; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(253, 202, 10, .8); }
.p-einv__stamp .pi { width: 14px; height: 14px; }
.p-einv__route { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.p-einv__node { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); text-align: center; color: #dbe6f4; font-size: 12px; font-weight: 600; line-height: 1.35; }
.p-einv__node .p-icon-tile { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.p-einv__wire { position: relative; width: 44px; height: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; border-radius: 2px; }
.p-einv__wire::after { content: ""; position: absolute; inset-block: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: wire 1.8s var(--ease-in-out) infinite; }
[dir="rtl"] .p-einv__wire::after { animation-name: wire-rtl; }
@keyframes wire { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@keyframes wire-rtl { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (max-width: 560px) { .p-einv__route { grid-template-columns: 1fr; } .p-einv__wire { width: 2px; height: 26px; justify-self: center; } .p-einv__wire::after { inset-inline: 0; height: 40%; width: auto; animation-name: wire-v; } @keyframes wire-v { from { top: -40%; } to { top: 100%; } } }

/* 8.13 Flow section */
.p-flow { display: grid; gap: clamp(28px, 4vw, 48px); }
.p-flow__diagram { position: relative; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: linear-gradient(160deg, #0b2a4a, #061528); color: #eef4fc; overflow: hidden; isolation: isolate; }
.p-flow__diagram::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 0%, rgba(59, 123, 255, .3), transparent 70%); }
.p-flow__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); position: relative; }
.p-flow__node { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; z-index: 1; }
.p-flow__orb { display: grid; place-items: center; width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); border-radius: 28px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: var(--signal); box-shadow: 0 0 0 10px rgba(255, 255, 255, .02), 0 20px 50px -20px rgba(59, 123, 255, .6); }
.p-flow__orb .pi { width: 36px; height: 36px; }
.p-flow__node strong { font: 700 1.05rem/1.3 var(--font-display); color: #fff; }
.p-flow__node span { font-size: var(--fs-sm); color: #a8bbd3; max-width: 26ch; }
.p-flow__nodes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-flow__nodes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-flow__track { position: absolute; inset-inline: 16.6%; top: calc(clamp(72px, 8vw, 96px) / 2); height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 8px, transparent 8px 16px); z-index: 0; }
.p-flow__nodes--2 .p-flow__track { inset-inline: 25%; } .p-flow__nodes--4 .p-flow__track { inset-inline: 12.5%; }
.p-flow__packet { position: absolute; top: -9px; inset-inline-start: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--signal); box-shadow: 0 0 22px rgba(253, 202, 10, .8); animation: packet 5s var(--ease-in-out) infinite; }
.p-flow__packet::after { content: ""; width: 8px; height: 2px; background: #0a1a2e; box-shadow: 0 3px 0 #0a1a2e, 0 -3px 0 #0a1a2e; }
@keyframes packet { 0% { inset-inline-start: 0; opacity: 0; } 8% { opacity: 1; } 45%, 55% { inset-inline-start: calc(50% - 10px); } 92% { opacity: 1; } 100% { inset-inline-start: calc(100% - 20px); opacity: 0; } }
.p-flow__caption { margin-top: var(--s-6); text-align: center; font-size: var(--fs-xs); color: #8ea3bf; }
.p-flow__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); list-style: none; counter-reset: fs; }
.p-flow__step { counter-increment: fs; position: relative; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.p-flow__step::before { content: counter(fs, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 36px; height: 36px; margin-bottom: var(--s-3); border-radius: 12px; background: var(--navy-800); color: var(--signal); font: 700 13px var(--font-text); }
.p-flow__step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.p-flow__step p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 760px) { .p-flow__nodes { grid-template-columns: 1fr; } .p-flow__track { inset-inline: auto; inset-inline-start: 50%; top: 40px; bottom: 40px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .25) 0 8px, transparent 8px 16px); } .p-flow__packet { display: none; } }

/* 8.14 Steps (timeline) */
.p-steps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p-steps__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.p-steps__list { list-style: none; counter-reset: st; display: grid; gap: 0; }
.p-steps__item { counter-increment: st; position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding-block-end: var(--s-6); }
.p-steps__item::before { content: counter(st); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--navy-700); color: var(--navy-800); font: 700 15px var(--font-text); position: relative; z-index: 1; }
:root[data-theme="dark"] .p-steps__item::before { color: var(--signal); border-color: var(--signal); }
.p-steps__item::after { content: ""; position: absolute; inset-inline-start: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--line-2), var(--line)); }
.p-steps__item:last-child::after { display: none; }
.p-steps__item:last-child { padding-block-end: 0; }
.p-steps__item h3 { font-size: 1.1rem; margin-bottom: 4px; }
.p-steps__item p { color: var(--ink-2); padding-top: 9px; }
.p-steps__item h3 + p { padding-top: 0; }
.p-steps__note { margin-top: var(--s-5); padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 900px) { .p-steps { grid-template-columns: 1fr; } .p-steps__intro { position: static; } }

/* 8.15 Checklist */
.p-check { columns: 3 300px; column-gap: var(--s-3); list-style: none; }
.p-check > .p-check__item { break-inside: avoid; margin-block-end: var(--s-3); }
.p-check__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.p-check__item:hover { border-color: var(--line-2); transform: translateY(-2px); }
.p-check__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--signal) 22%, var(--surface)); color: var(--navy-800); }
:root[data-theme="dark"] .p-check__icon, [data-appearance="stage"] .p-check__icon, [data-appearance="aurora"] .p-check__icon { color: var(--signal); background: rgba(253, 202, 10, .12); }
.p-check__icon .pi { width: 20px; height: 20px; }
.p-check__item strong { display: block; font-weight: 650; margin-bottom: 4px; color: var(--ink); }
.p-check__item p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.65; }
.p-check__sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; list-style: none; }
.p-check__sub li { padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.p-check--columns { columns: 2 340px; column-gap: var(--s-7); }
.p-check--columns > .p-check__item { margin-block-end: 0; }
.p-check--columns .p-check__item { background: none; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
.p-check--columns .p-check__item:hover { transform: none; }
.p-check--chips { display: flex; flex-wrap: wrap; gap: 10px; }
.p-check--chips .p-check__item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-pill); }
.p-check--chips .p-check__icon { width: 26px; height: 26px; border-radius: 8px; }
.p-check--chips .p-check__icon .pi { width: 16px; height: 16px; }
.p-check--chips p { font-size: var(--fs-sm); font-weight: 550; color: var(--ink); }


/* 8.16 Split */
.p-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-split--reverse .p-split__visual { order: -1; }
.p-split__copy { display: grid; gap: var(--s-4); }
.p-prose { color: var(--ink-2); font-size: var(--fs-body); }
.p-prose > * + * { margin-top: 1em; }
.p-prose strong { color: var(--ink); }
.p-prose ul, .p-prose ol { padding-inline-start: 1.3em; display: grid; gap: .4em; }
.p-split__points { display: grid; gap: 10px; list-style: none; margin-top: var(--s-2); }
.p-split__points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 550; color: var(--ink); }
.p-split__points .pi { color: var(--ok); margin-top: 3px; }
.p-split__visual { position: relative; display: grid; place-items: center; min-height: 320px; border-radius: var(--r-xl); background: linear-gradient(160deg, #0b2a4a, #061528); padding: clamp(28px, 4vw, 48px); overflow: hidden; isolation: isolate; }
.p-split__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 30% 20%, rgba(59, 123, 255, .35), transparent 70%); }
.p-split__visual--image { padding: 0; background: var(--surface-2); }
.p-split__visual--image img { width: 100%; height: 100%; object-fit: cover; }
.p-glyph { position: relative; display: grid; place-items: center; width: min(70%, 260px); aspect-ratio: 1; border-radius: 40px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--signal); box-shadow: 0 0 0 18px rgba(255, 255, 255, .025), 0 0 0 36px rgba(255, 255, 255, .015); }
.p-glyph .pi { width: 42%; height: 42%; stroke-width: 1.2; }
.p-glyph::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from 0deg, transparent 0 80%, rgba(253, 202, 10, .7) 90%, transparent); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; animation: net-spin 6s linear infinite; }
@media (max-width: 900px) { .p-split { grid-template-columns: 1fr; } .p-split__visual { min-height: 240px; } .p-split--reverse .p-split__visual { order: 0; } }

/* 8.17 Bento */
.p-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); list-style: none; }
.p-bento__tile { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.p-bento__tile--wide { grid-column: span 2; background: linear-gradient(150deg, var(--surface), var(--surface-2)); }
.p-bento__tile p { color: var(--ink-2); font-size: var(--fs-sm); }
.p-bento__tile .p-link { margin-top: auto; }
@media (max-width: 900px) { .p-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .p-bento { grid-template-columns: 1fr; } .p-bento__tile--wide { grid-column: auto; } }

/* 8.18 Offices */
.p-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); list-style: none; }
.p-office { position: relative; display: grid; gap: var(--s-4); padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.p-office::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--navy-700), var(--electric)); }
.p-office--hq::before { background: linear-gradient(90deg, var(--signal), #ffb703); }
.p-office__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.p-office h3 { font-size: 1.3rem; }
.p-office__addr { display: flex; gap: 10px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.p-office__addr .pi, .p-office__contact .pi { color: var(--ink-3); margin-top: 2px; }
.p-office__contact { display: grid; gap: 8px; list-style: none; }
.p-office__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; font-size: var(--fs-sm); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); transition: border-color var(--dur-1), background-color var(--dur-1); }
.p-office__contact a:hover { border-color: var(--line-2); background: var(--surface); }
.p-office__map { justify-self: start; }

/* 8.19 Routes */
.p-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); list-style: none; }
.p-route { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2); }
a.p-route:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.p-route h3 { font-size: 1.08rem; }
.p-route p { color: var(--ink-2); font-size: var(--fs-sm); }
.p-route .p-link { margin-top: auto; font-size: var(--fs-sm); }

/* 8.20 FAQ accordion */
.p-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p-faq__list { display: grid; gap: 10px; }
.p-faq details { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.p-faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.p-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 20px 22px; cursor: pointer; list-style: none; font: 650 1.05rem/1.4 var(--font-display); color: var(--ink); }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary .pi { flex: none; transition: transform var(--dur-2) var(--ease-out); color: var(--ink-3); }
.p-faq details[open] summary .pi { transform: rotate(45deg); }
.p-faq__a { padding: 0 22px 22px; color: var(--ink-2); line-height: 1.75; }
.p-faq__a > * + * { margin-top: .8em; }
.p-faq__a ul { padding-inline-start: 1.2em; display: grid; gap: .35em; }
@media (max-width: 900px) { .p-faq { grid-template-columns: 1fr; } }

/* 8.21 CTA band */
.p-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: var(--s-6); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); background: linear-gradient(130deg, #0b2a4a 0%, #123a63 55%, #1b4e82 100%); color: #eef4fc; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-3); }
.p-cta::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgba(253, 202, 10, .35), transparent); }
.p-cta::after { content: ""; position: absolute; inset-inline-end: 6%; bottom: -60px; width: 220px; height: 220px; z-index: -1; background: var(--signal); opacity: .9; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 30%, 30% 50%, 50% 70%, 70% 50%, 50% 30%); }
.p-cta h2 { color: #fff; max-width: 22ch; }
.p-cta p { margin-top: var(--s-3); color: #c3d1e3; max-width: 52ch; }
.p-cta--yellow { background: linear-gradient(130deg, #fdca0a, #ffdc4d); color: #0a1a2e; }
.p-cta--yellow h2 { color: #0a1a2e; } .p-cta--yellow p { color: #3a3a1a; }
.p-cta--yellow::after { background: #0b2a4a; opacity: .12; }
@media (max-width: 760px) { .p-cta { grid-template-columns: 1fr; } .p-cta::after { display: none; } }

/* 8.22 Rich text (premium) */
.p-richtext { max-width: 760px; margin-inline: auto; font-size: var(--fs-body); color: var(--ink-2); }
.p-richtext h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 1.6em 0 .6em; }
.p-richtext h3 { margin: 1.4em 0 .5em; }
.p-richtext p, .p-richtext ul, .p-richtext ol { margin-block: .9em; }
.p-richtext ul, .p-richtext ol { padding-inline-start: 1.3em; }
.p-richtext img.prose-photo { width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; margin-block: 1.4em; }

/* contact hero composition */
.p-contact-vis { display: grid; gap: 14px; }
.p-contact-vis__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px); color: #eef4fc; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.p-contact-vis__card:hover { transform: translateX(4px); border-color: rgba(253, 202, 10, .6); }
[dir="rtl"] .p-contact-vis__card:hover { transform: translateX(-4px); }
.p-contact-vis__card .p-icon-tile { background: rgba(253, 202, 10, .12); border-color: rgba(253, 202, 10, .3); }
.p-contact-vis__card small { display: block; color: #9fb3cc; font-size: 12px; }
.p-contact-vis__card strong { display: block; font-size: 1.02rem; }
.p-contact-vis__card:nth-child(2) { margin-inline-start: 28px; } .p-contact-vis__card:nth-child(3) { margin-inline-start: 56px; }
@media (max-width: 560px) { .p-contact-vis__card:nth-child(n) { margin-inline-start: 0; } }

/* product at a glance (overlaps the hero) */
.p-glance { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.p-glance__summary { margin-top: 8px; color: var(--ink-2); }
.p-glance__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); margin-bottom: 8px; }
@media (max-width: 960px) { .p-glance { grid-template-columns: 1fr; } }
.p-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.mk-ping { transform-origin: 168px 132px; animation: mk-ping 2.6s var(--ease-out) infinite; }
@keyframes mk-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* ===== 10 ─ Full-site templates (rollout) ============================================================ */

/* inner hero variants */
.p-phero__copy { min-width: 0; }
.p-phero .p-eyebrow { color: #a8bbd3; }
.p-phero .p-eyebrow > svg { --dia-hole: #071a33; }
.p-eyebrow__link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.p-eyebrow__link:hover { color: #fff; border-color: var(--signal); }
.p-phero__meta { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); color: #9fb3cc; font-size: var(--fs-sm); }
.p-phero__art { position: relative; display: grid; place-items: center; min-height: 300px; padding: 24px; border-radius: var(--r-xl); background: radial-gradient(70% 70% at 70% 30%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%), rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.p-phero__art--glyph { min-height: 260px; background: radial-gradient(60% 60% at 50% 40%, rgba(59, 123, 255, .3), transparent 70%), rgba(255, 255, 255, .03); }
.p-phero .p-illus-note { color: #8ea3bf; }
.p-phero--banner { padding-bottom: clamp(32px, 4vw, 56px); }
.p-phero__banner { margin-top: clamp(28px, 3vw, 44px); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 1; box-shadow: var(--glow); background: #0b2a4a; }
.p-phero__banner img { width: 100%; height: 100%; object-fit: cover; }
.p-phero--search { padding-block: clamp(40px, 5vw, 72px); }

/* search */
.p-search { display: flex; align-items: center; gap: 10px; margin-top: var(--s-5); padding: 6px 6px 6px 16px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-3); }
[dir="rtl"] .p-search { padding: 6px 16px 6px 6px; }
.p-search .pi { color: #5e6f85; flex: none; }
.p-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.05rem; color: #0a1a2e; padding: 10px 4px; outline: none; }
.p-search--dark { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; }
.p-search--dark input { color: #fff; } .p-search--dark input::placeholder { color: #9fb3cc; } .p-search--dark .pi { color: #9fb3cc; }
.p-search--sm { margin: 0; box-shadow: none; border: 1px solid var(--line-2); background: var(--surface); flex: 1 1 280px; }
.p-search--sm input { font-size: var(--fs-sm); color: var(--ink); padding: 8px 4px; }
.p-results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.p-results { list-style: none; display: grid; gap: 10px; }
.p-result { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-result:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.p-result__body { display: grid; gap: 2px; min-width: 0; }
.p-result__kind { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
:root:lang(ar) .p-result__kind { text-transform: none; letter-spacing: 0; }
.p-result strong { font: 650 1.08rem/1.35 var(--font-display); color: var(--ink); }
.p-result__desc { color: var(--ink-2); font-size: var(--fs-sm); }
.p-suggest { margin-top: var(--s-7); }
.p-suggest__title { font-size: 1.3rem; margin-bottom: var(--s-4); }
.p-route .p-show__dot { margin-bottom: 4px; }

/* error page */
.p-error__code { font: 800 clamp(4rem, 3rem + 6vw, 8rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px rgba(253, 202, 10, .7); letter-spacing: -.04em; margin-bottom: var(--s-3); }
.p-error__ref { margin-top: var(--s-5); color: #8ea3bf; font-size: var(--fs-xs); }
.p-error__debug { max-height: 300px; overflow: auto; padding: 16px; border-radius: 12px; background: rgba(0, 0, 0, .35); color: #ffd7d7; font-size: 12px; }
.p-error__art { display: grid; place-items: center; min-height: 280px; }

/* article layout */
.p-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.p-richtext--article { max-width: 760px; margin-inline: 0; }
.p-article__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s-4); }
.p-toc { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.p-toc__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
:root:lang(ar) .p-toc__title { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.p-toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.p-toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; text-decoration: none; border-inline-start: 2px solid transparent; }
.p-toc a:hover { background: var(--surface-2); color: var(--ink); }
.p-toc a.is-current { border-color: var(--signal); color: var(--ink); background: var(--surface-2); font-weight: 600; }
.p-aside-card { display: grid; gap: 6px; padding: var(--s-5); border-radius: var(--r-lg); background: linear-gradient(150deg, #0b2a4a, #071a33); color: #eef4fc; text-decoration: none; position: relative; overflow: hidden; }
.p-aside-card::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); }
.p-aside-card .p-show__kicker { color: #a8bbd3; }
.p-aside-card strong { font: 700 1.15rem/1.3 var(--font-display); color: #fff; }
.p-aside-card .p-link { color: var(--signal); font-size: var(--fs-sm); }
.p-aside-cta { padding: var(--s-5); border-radius: var(--r-lg); background: var(--signal-soft); border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); display: grid; gap: var(--s-3); }
:root[data-theme="dark"] .p-aside-cta { background: rgba(253, 202, 10, .08); }
.p-aside-cta p { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
@media (max-width: 1080px) { .p-article { grid-template-columns: 1fr; } .p-article__aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .p-toc { display: none; } }
/* legacy rich text, refined */
.p-richtext { line-height: 1.8; overflow-wrap: anywhere; }
.p-richtext > :first-child { margin-top: 0; }
.p-richtext h2 { color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.p-richtext h3, .p-richtext h4 { color: var(--ink); font-family: var(--font-display); }
.p-richtext strong, .p-richtext b { color: var(--ink); }
.p-richtext a { color: var(--link); }
.p-richtext ul { list-style: none; padding-inline-start: 0; display: grid; gap: .5em; }
.p-richtext ul > li { position: relative; padding-inline-start: 1.6em; }
.p-richtext ul > li::before { content: ""; position: absolute; inset-inline-start: .2em; top: .7em; width: 8px; height: 8px; border-radius: 2px; rotate: 45deg; background: var(--signal); }
.p-richtext ol { padding-inline-start: 1.4em; display: grid; gap: .5em; }
.p-richtext ol > li::marker { color: var(--ink-3); font-weight: 700; }
.p-richtext table { width: 100%; border-collapse: collapse; margin-block: 1.4em; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.p-richtext th, .p-richtext td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; vertical-align: top; }
.p-richtext th { background: var(--surface-2); color: var(--ink); }
.p-richtext blockquote { margin: 1.4em 0; padding: 16px 20px; border-inline-start: 4px solid var(--signal); background: var(--surface-2); border-radius: 0 12px 12px 0; color: var(--ink); }
.p-richtext img:not(.prose-photo):not(.prose-inline) { border-radius: 12px; height: auto; }
.p-richtext .prose-inline { display: inline-block; vertical-align: middle; margin: .4em .6em .4em 0; max-width: min(100%, 220px); }
.p-richtext .prose-figure { display: block; margin-block: 1.4em; }
.p-richtext .prose-caption { display: block; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); margin-top: 8px; }
.p-richtext iframe { max-width: 100%; border: 0; border-radius: 12px; }
.p-section--article { padding-block-start: clamp(40px, 5vw, 72px); }

/* product listing */
.p-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); list-style: none; }
.p-pcard--lead { grid-column: span 2; }
.p-pcard__link { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.p-pcard__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.p-pcard__art { display: grid; place-items: center; min-height: 230px; padding: 22px; background: radial-gradient(70% 80% at 70% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), linear-gradient(160deg, #0b2a4a, #061528); overflow: hidden; }
.p-pcard__art .p-ui { transform: none; width: min(100%, 360px); font-size: 11px; }
.p-pcard__art .p-ui__phone { width: 150px; } .p-pcard__art .p-ui__screen { min-height: 200px; }
.p-pcard--lead .p-pcard__link { display: grid; grid-template-columns: 1.1fr 1fr; }
.p-pcard--lead .p-pcard__art { min-height: 100%; order: 2; }
.p-pcard__body { display: flex; flex-direction: column; gap: 8px; padding: var(--s-5); flex: 1; }
.p-pcard__title { font: 700 1.25rem/1.25 var(--font-display); color: var(--ink); }
.p-pcard--lead .p-pcard__title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.p-pcard__text { color: var(--ink-2); font-size: var(--fs-sm); }
.p-pcard__mods { display: flex; flex-wrap: wrap; gap: 6px; }
.p-pcard__mods span { padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.p-pcard__body .p-link { margin-top: auto; padding-top: 8px; }
@media (max-width: 1024px) { .p-pgrid { grid-template-columns: 1fr 1fr; } .p-pcard--lead .p-pcard__link { grid-template-columns: 1fr; } .p-pcard--lead .p-pcard__art { order: 0; min-height: 230px; } }
@media (max-width: 640px) { .p-pgrid { grid-template-columns: 1fr; } .p-pcard--lead { grid-column: auto; } }

/* solution catalogue + filter */
.p-filter { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); position: sticky; top: calc(var(--header-h) + 12px); z-index: 5; }
.p-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-filter__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: var(--fs-xs); cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.p-filter__chip span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-filter__chip:hover { border-color: var(--ink-3); }
.p-filter__chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.p-filter__chip[aria-pressed="true"] span { color: var(--signal); }
.p-filter__count { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; }
.p-filter__empty { padding: var(--s-6); text-align: center; color: var(--ink-3); }
.p-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--s-3); list-style: none; }
.p-scard { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.p-scard::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--accent); opacity: .85; }
.p-scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.p-scard__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.p-scard__tag .p-mega__dot { margin: 0; width: 8px; height: 8px; }
.p-scard strong { font: 650 1.02rem/1.4 var(--font-display); color: var(--ink); }
.p-scard__text { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.p-scard .p-link { margin-top: auto; font-size: var(--fs-sm); }
.p-scards li.is-filtered { display: none; }

/* product "what's inside" */
.p-inside { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p-inside__intro { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s-4); }
.p-modules { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); counter-reset: none; }
.p-module { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2); }
.p-module:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-2); }
.p-module__ico { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.p-module__n { font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-module strong { font: 650 1.05rem/1.3 var(--font-display); color: var(--ink); }
.p-platform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: clamp(32px, 4vw, 56px); padding: var(--s-5) var(--s-6); border-radius: var(--r-xl); background: linear-gradient(130deg, #0b2a4a, #123a63); color: #eef4fc; }
.p-platform__core { display: flex; align-items: center; gap: 12px; }
.p-platform__core svg { width: 30px; height: 30px; color: var(--signal); --dia-hole: #0b2a4a; }
.p-platform__core strong { display: block; font: 800 1.1rem var(--font-display); color: #fff; }
.p-platform__core small { display: block; color: #a8bbd3; font-size: 12.5px; }
.p-platform__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; flex: 1; }
.p-platform__list a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #e3ebf6; font-size: 13px; font-weight: 600; text-decoration: none; }
.p-platform__list a:hover { border-color: var(--accent); background: rgba(255, 255, 255, .1); }
.p-platform__list .p-mega__dot { margin: 0; width: 8px; height: 8px; }
@media (max-width: 960px) { .p-inside { grid-template-columns: 1fr; } .p-inside__intro { position: static; } }
@media (max-width: 560px) { .p-modules { grid-template-columns: 1fr; } }

/* gallery of real screens */
.p-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); list-style: none; align-items: start; }
.p-gallery--one { grid-template-columns: minmax(0, 760px); justify-content: center; }
.p-gallery__frame { display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transition: transform var(--dur-2) var(--ease-out); }
.p-gallery__frame:hover { transform: translateY(-4px); }
.p-gallery__frame img { width: 100%; height: auto; display: block; }
.p-gallery__item.is-tall .p-gallery__frame { max-width: 260px; margin-inline: auto; background: #0a1a2e; padding: 10px; border-radius: 30px; }
.p-gallery__item.is-tall .p-gallery__frame img { border-radius: 22px; }
.p-gallery__cap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.p-badge--screen { background: rgba(34, 197, 94, .16); color: #0f7a3e; } .p-badge--diagram { background: rgba(59, 123, 255, .16); color: #1b56c9; }
.p-badge--product { background: var(--signal-soft); color: #6b4f00; } .p-badge--photo { background: var(--surface-2); color: var(--ink-2); }
[data-appearance="stage"] .p-badge--screen, [data-appearance="aurora"] .p-badge--screen { background: rgba(34, 197, 94, .18); color: #7ee2a8; }
[data-appearance="stage"] .p-badge--diagram, [data-appearance="aurora"] .p-badge--diagram { background: rgba(59, 123, 255, .2); color: #9cc0ff; }

/* figure, specs, quotes */
.p-figure img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.p-figure figcaption { margin-top: 12px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
.p-specs { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.p-specs div { display: grid; grid-template-columns: minmax(140px, .4fr) 1fr; gap: var(--s-4); padding: 14px 20px; border-bottom: 1px solid var(--line); }
.p-specs div:last-child { border-bottom: 0; }
.p-specs dt { font-weight: 650; color: var(--ink); } .p-specs dd { margin: 0; color: var(--ink-2); }
.p-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); list-style: none; }
.p-quote { padding: var(--s-6); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4); }
.p-quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.p-quote blockquote::before { content: "“"; display: block; font: 800 3rem/0.6 var(--font-display); color: var(--signal); margin-bottom: 8px; }
.p-quote__by { display: grid; gap: 2px; margin-top: auto; } .p-quote__by span { color: var(--ink-3); font-size: var(--fs-sm); }


/* 9 ─ Motion: scroll reveal (only when JS marks the document ready; content is visible without JS) */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .p-net .net-pulse, .p-einv__wire::after, .p-flow__packet, .p-glyph::after { display: none; }
  .p-ui { transform: none !important; }
}
@media print { .p-header, .p-footer, .p-drawer { display: none; } .p-hero, .p-phero, [data-appearance="stage"] { background: none !important; color: #000 !important; } }

/* gallery lightbox */
.p-lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--r-xl); background: #0a1a2e; color: #e3ebf6; overflow: hidden; }
.p-lightbox::backdrop { background: rgba(4, 12, 24, .82); backdrop-filter: blur(4px); }
.p-lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 64px); margin: auto; background: #fff; }
.p-lightbox__cap { padding: 14px 20px; font-size: var(--fs-sm); }
.p-lightbox__close { position: absolute; inset-inline-end: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10, 26, 46, .85); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.p-lightbox__close:focus-visible { outline: 3px solid var(--signal); }


/* logo wall */
.p-logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; list-style: none; }
.p-logo-wall__item { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 14px 18px; border-radius: var(--r-md, 14px); background: #fff; border: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-logo-wall__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.p-logo-wall__item a { display: contents; }
.p-logo-wall__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
:root[data-theme="dark"] .p-logo-wall__item { border-color: transparent; }

.section-anchor { display: block; position: relative; top: calc(-1 * var(--header-h, 72px)); visibility: hidden; height: 0; }
.p-prose .p-lede { font: 600 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.45 var(--font-display); color: inherit; }

/* long button labels wrap instead of widening their column */
.p-inside > *, .p-split > *, .p-article > * { min-width: 0; }
.p-btn { max-width: 100%; }
@media (max-width: 640px) { .p-btn { white-space: normal; text-align: center; line-height: 1.3; } }

/* "Edit this page" (signed-in editors only; added by site.js after the admin session is confirmed) */
.edit-bar { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 95; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: #0b1828; box-shadow: 0 8px 28px rgba(11, 24, 40, .35); }
.edit-bar a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; color: #fff; }
.edit-bar .edit-bar__btn { background: #ffc81e; color: #0b1828; }
.edit-bar a:hover, .edit-bar a:focus-visible { outline: 2px solid #ffc81e; outline-offset: 2px; }
@media print { .edit-bar { display: none; } }

/* News cards: wide text banners shown whole; designed tile (year + category) when the image text is in the other language */
.p-post__img--fit { background: #fff; }
.p-post__img--fit img { object-fit: contain; }
.p-post:hover .p-post__img--fit img { transform: none; }
.p-post__img--ph { background:
  radial-gradient(120% 90% at 100% 0%, rgba(255, 200, 30, .16), transparent 55%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 14px),
  linear-gradient(140deg, #0b2a4a, #123a63); }
.p-post__ph { display: grid; justify-items: center; gap: 6px; color: #fff; text-align: center; }
.p-post__ph b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.p-post__ph small { font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .72); letter-spacing: .04em; }
.p-post__ph svg { width: 22px; height: 22px; color: var(--signal); --dia-hole: #0f2f52; }
@media (max-width: 360px) {
  .p-utility .pi { display: none; }
  .p-utility__in, .p-utility ul { gap: 10px; }
  .p-utility { font-size: 11.5px; }
}

/* 12 ─ GTS Store integration: highlighted menu link, store showcase, hardware illustration, featured products, footer band */
.p-nav__link--hl { gap: 6px; margin-inline-start: 6px; padding-inline: 14px; background: rgba(253, 202, 10, .16); box-shadow: inset 0 0 0 1px rgba(227, 178, 0, .45); color: var(--ink); font-weight: 650; }
.p-nav__link--hl:hover { background: rgba(253, 202, 10, .3); }
.p-nav__link--hl .pi { opacity: 1; color: var(--signal-600); }
:root[data-theme="dark"] .p-nav__link--hl .pi { color: var(--signal); }
.p-drawer__top--hl { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.p-drawer__top--hl .pi, .p-drawer__top .pi { width: 16px; height: 16px; color: var(--signal-600); }
.p-footer__hl { color: #fff !important; font-weight: 650; }
.p-footer a .pi { width: 12px; height: 12px; margin-inline-start: 4px; vertical-align: -1px; opacity: .7; }

.p-store__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p-store__in > * { min-width: 0; }
.p-store__cats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-block: var(--s-5) var(--s-5); }
.p-store__cat { display: flex; align-items: center; gap: var(--s-3); height: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2); }
a.p-store__cat:hover { transform: translateY(-2px); border-color: rgba(253, 202, 10, .55); }
.p-store__cat .p-icon-tile { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.p-store__cat-txt { display: grid; gap: 2px; }
.p-store__cat-txt strong { font: 650 1rem/1.3 var(--font-display); }
.p-store__cat-txt small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.p-store__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.p-store__ctas .p-btn .pi { width: 16px; height: 16px; }
.p-store__note { margin-top: var(--s-4); color: var(--ink-3); font-size: var(--fs-xs); }
.p-store__img img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
@media (max-width: 980px) { .p-store__in { grid-template-columns: 1fr; } .p-store__visual { max-width: 520px; margin-inline: auto; width: 100%; } }
@media (max-width: 520px) { .p-store__cats { grid-template-columns: 1fr; } }

.p-hw { position: relative; margin: 0; }
.p-hw__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }
.p-hw__flow { fill: none; stroke: #29c9f0; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: .8; animation: hw-flow 2.4s linear infinite; }
.p-hw__flow--2 { animation-duration: 2.9s; } .p-hw__flow--3 { animation-duration: 3.3s; } .p-hw__flow--4 { animation-duration: 2.6s; animation-direction: reverse; }
.p-hw__led { animation: hw-led 2.2s ease-in-out infinite; }
.p-hw__led--amber { animation-duration: 3.1s; }
.p-hw__d0 { animation-delay: 0s; } .p-hw__d1 { animation-delay: .37s; } .p-hw__d2 { animation-delay: .74s; } .p-hw__d3 { animation-delay: 1.11s; } .p-hw__d4 { animation-delay: 1.48s; }
.p-hw__float { animation: hw-float 6s var(--ease-in-out) infinite; transform-box: fill-box; }
.p-hw__f1 { animation-delay: -1.5s; } .p-hw__f2 { animation-delay: -3s; } .p-hw__f3 { animation-delay: -4.5s; }
@keyframes hw-flow { to { stroke-dashoffset: -48; } }
@keyframes hw-led { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.p-hw .p-illus-note { margin-top: var(--s-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .p-hw__flow, .p-hw__led, .p-hw__float { animation: none !important; } }

.p-sprod { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.p-sprod__card { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.p-sprod__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.p-sprod__img { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-4); background: #fff; }
.p-sprod__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.p-sprod__body { display: grid; gap: var(--s-2); padding: var(--s-4); }
.p-sprod__body strong { font: 650 1rem/1.35 var(--font-display); }
.p-sprod__price b { font: 700 1.1rem var(--font-display); }
.p-sprod__price small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.p-sprod__more { margin-top: var(--s-5); text-align: center; }

.p-footer__promo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); margin-bottom: var(--s-7); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(59, 123, 255, .16), rgba(253, 202, 10, .1)); border: 1px solid rgba(255, 255, 255, .12); }
.p-footer__promo p { margin: 0; color: #c7d4e5; }
.p-footer__promo strong { display: block; color: #fff; font: 650 1.12rem/1.35 var(--font-display); }
.p-footer__promo .p-icon-tile { background: rgba(253, 202, 10, .12); border-color: rgba(253, 202, 10, .3); color: var(--signal); }
@media (max-width: 760px) { .p-footer__promo { grid-template-columns: 1fr; text-align: start; } .p-footer__promo .p-btn { justify-self: start; } }

.preview-hidden { margin: 12px auto; max-width: var(--container); padding: 10px 16px; border: 2px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.p-store__in:not(:has(> .p-store__visual)) { grid-template-columns: minmax(0, 1fr); }
.p-store__in:not(:has(> .p-store__visual)) .p-store__cats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p-footer a .pi, .p-drawer__top .pi { display: inline-block; }
.p-footer a.p-btn, .p-footer a.p-btn:hover { color: var(--b-ink); text-decoration: none; }
.p-footer__promo .p-btn--primary { --b-ink: #0a1a2e; }
/* header: keep every link on one line; tighter spacing on narrower desktops (the burger menu takes over below 1280px) */
.p-nav__link { white-space: nowrap; }
@media (max-width: 1400px) { .p-nav__list { gap: 0; } .p-nav__link { padding-inline: 9px; } .p-nav__link--hl { padding-inline: 11px; margin-inline-start: 2px; } }

/* 13 ─ GTS Store: premium header button + featured card in the Solutions menu (owner request 2026-10-11).
   Deep navy capsule, gold hairline and icon, soft depth; a light sweep on hover (off for reduced motion). */
.p-nav__link--hl { position: relative; overflow: hidden; isolation: isolate; gap: 7px; margin-inline-start: 8px; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(253, 202, 10, .55), 0 6px 18px -6px rgba(7, 26, 51, .55); font-weight: 650; letter-spacing: .01em;
  transition: transform var(--dur-1, .15s) ease, box-shadow var(--dur-1, .15s) ease; }
.p-nav__link--hl::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 160, .38) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.p-nav__link--hl:hover, .p-nav__link--hl:focus-visible { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%); color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--signal), 0 10px 24px -8px rgba(7, 26, 51, .6); }
.p-nav__link--hl:hover::after, .p-nav__link--hl:focus-visible::after { transform: translateX(120%); }
.p-nav__link--hl .pi { color: var(--signal); opacity: 1; }
:root[data-theme="dark"] .p-nav__link--hl { background: linear-gradient(135deg, #ffe27a 0%, var(--signal) 55%, var(--signal-600) 100%); color: var(--navy-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 22px -8px rgba(253, 202, 10, .45); }
:root[data-theme="dark"] .p-nav__link--hl .pi { color: var(--navy-900); }
:root[data-theme="dark"] .p-nav__link--hl:hover { color: var(--navy-950); background: linear-gradient(135deg, #fff0b3 0%, #ffd84a 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-nav__link--hl { background: linear-gradient(135deg, #ffe27a 0%, var(--signal) 55%, var(--signal-600) 100%); color: var(--navy-950); }
  :root:not([data-theme="light"]) .p-nav__link--hl .pi { color: var(--navy-900); } }

/* featured card inside a mega menu (Solutions → GTS Store) */
.p-mega__feature { position: relative; overflow: hidden; align-items: center; padding: 14px 16px; border-radius: 14px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(253, 202, 10, .28) 0%, transparent 55%), linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  box-shadow: inset 0 0 0 1px rgba(253, 202, 10, .45); }
.p-mega__feature:hover { background: radial-gradient(120% 140% at 100% 0%, rgba(253, 202, 10, .38) 0%, transparent 60%), linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); color: #fff; }
.p-mega__feature strong { color: #fff; font-size: 15px; }
.p-mega__feature small { color: #c9d6e8; }
.p-mega__feature-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #ffe27a, var(--signal) 60%, var(--signal-600)); color: var(--navy-950); box-shadow: 0 6px 16px -6px rgba(253, 202, 10, .7); }
.p-mega__feature-icon .pi { width: 20px; height: 20px; color: var(--navy-950); }
.p-mega__feature-ext { margin-inline-start: auto; color: var(--signal); flex: none; }
.p-drawer__hl { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.p-drawer__hl .pi { width: 16px; height: 16px; color: var(--signal-600); }
@media (prefers-reduced-motion: reduce) { .p-nav__link--hl, .p-nav__link--hl::after { transition: none; } .p-nav__link--hl:hover { transform: none; } }

.p-brand { flex: none; } /* the logo never shrinks; the menu adapts instead */
@media (max-width: 1366px) { .p-bar__in { gap: var(--s-3, 12px); } .p-nav__link { padding-inline: 8px; } .p-nav__link--hl { padding-inline: 12px; } }
/* GTS Store in the mobile menu: the same premium capsule (top level and under Solutions) */
.p-drawer a.p-drawer__hl, .p-drawer a.p-drawer__top--hl { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%); color: #fff; font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(253, 202, 10, .55), 0 6px 16px -8px rgba(7, 26, 51, .55); }
.p-drawer a.p-drawer__hl .pi, .p-drawer a.p-drawer__top--hl .pi { flex: none; width: 16px; height: 16px; color: var(--signal); }
.p-drawer ul ul a.p-drawer__hl { margin-block: 6px; font-size: var(--fs-sm); }