/* Arabic-capable local fallback (Arial has no Arabic glyphs, so size-adjust never applied).
   Metrics tuned toward Tajawal; hero line boxes also reserve final wrap height (see .sxf-svc-h1). */
@font-face{font-family:"Tajawal Fallback";src:local("Segoe UI"),local("Tahoma"),local("Arial");size-adjust:112%;ascent-override:100%;descent-override:28%;line-gap-override:0%;}
@font-face{font-family:Tomorrow;font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/tomorrow-700.woff2") format("woff2");}

/* Extracted shell CSS for service proof pages — subset of site.css */
:root {
  --surface-paper: #f4f7fa;
  --surface-paper-2: #ffffff;
  --surface-panel: #edf3f7;
  --ink: #07131f;
  --ink-navy: #06182c;
  --navy-mid: #0d3a60;
  --text-muted: #50606f;
  --text-muted-sm: #45525f;
  --text-on-dark: #c5d4e0;
  --signal-blue: #0877e6;
  --signal-blue-text: #065fb8;
  --signal-cyan: #20cbed;
  --state-error: #9B3D52; /* 6.14:1 paper / 6.60:1 white */
  --line: #d8e2ea;
  --motion-fast: 400ms;
  --motion-med: 900ms;
  --motion-slow: 1800ms;
  --motion-micro: 150ms;
  --motion-stagger: 60ms;
  --motion-ambient: 18s;
  --motion-ambient-slow: 36s;
  --motion-intro: 2.4s;
  --motion-intro-delay: var(--motion-fast);
  --motion-water: 2.4s;
  --ease-signal: cubic-bezier(.2, .8, .2, 1);
  --ease-intro-line: cubic-bezier(.42, 0, .18, 1);
  --ease-intro-settle: cubic-bezier(.22, .82, .18, 1);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 56px;
  --space-7: 80px;
  --space-8: 120px;
  --fs-label: 12px;
  --fs-body: 16px;
  --fs-lede: 18px;
  --max: 1380px;
  --shadow: 0 30px 80px rgba(8, 30, 50, .12);
  --header-h: 80px;
  --hero-seam: clamp(1.25rem, 2.4vw, 1.75rem);
  --hero-copy-gap: clamp(0.75rem, 1.4vw, 1.125rem);
  --stack-seam: clamp(2rem, 3.2vw, 2.75rem);
  --glass-fill: rgb(244 247 250 / 0.78);
  --glass-filter: blur(18px) saturate(1.14);
  --hero-panel-ink: #f4f7fa;
  --hero-panel-muted: #dbe7f0;
  --hero-panel-accent: #c8f4ff;

  /* Live-class aliases → V3 tokens (no warm leftovers). */
  --paper: var(--surface-paper);
  --paper-2: var(--surface-paper-2);
  --paper-3: var(--surface-panel);
  --ink-2: var(--text-muted-sm);
  --muted: var(--text-muted);
  --muted-2: var(--text-muted-sm);
  --line-2: color-mix(in srgb, var(--ink) 6%, transparent);
  --line-3: color-mix(in srgb, var(--ink) 16%, transparent);
  --accent: var(--ink-navy);
  --accent-hover: var(--signal-blue-text);
  --accent-light: var(--signal-cyan);
  --accent-tint: color-mix(in srgb, var(--signal-blue) 10%, transparent);
  --accent-soft: var(--surface-panel);
  --accent-edge: var(--line);
  --dark: var(--ink-navy);
  --dark-2: var(--navy-mid);
  --on-dark: var(--text-on-dark);
  --on-dark-mu: color-mix(in srgb, var(--text-on-dark) 82%, transparent);
  --line-dark: color-mix(in srgb, var(--surface-paper-2) 14%, transparent);
  --line-dark-2: color-mix(in srgb, var(--surface-paper-2) 8%, transparent);

  --sans: var(--font-tajawal), "Tajawal Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans-latin: var(--font-inter), "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 6.5vw, 5.5rem);
  --fs-h1-sub: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 3.5rem);
  --fs-lead: var(--fs-lede);
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: var(--fs-label);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: var(--max);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 24px;
  --r-pill: 12px;

  --sh-1: 0 12px 35px color-mix(in srgb, var(--ink) 4%, transparent);
  --sh-2: var(--shadow);
  --sh-3: var(--shadow);
  --ease-out: var(--ease-signal);
  --ease-in-out: var(--ease-signal);
  --ease: var(--ease-signal);
  --ease-2: var(--ease-signal);
}
.brand, [lang="en"]{font-family: var(--sans-latin);}
/* Accent word. A dimmer grey read as de-emphasis, which is the opposite of a
   highlight — so it inverts instead. Stays monochrome, no brand hue needed. */
.serif{font-weight: inherit;
  background: none; color: var(--signal-blue-text);
  padding: 0; border-radius: 0;}
/* ---------- 5. Buttons --------------------------------------------------- */
.btn{--btn-bg: var(--ink-navy);
  --btn-fg: var(--surface-paper-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: 14px 22px; min-height: 3rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--ink-navy);
  border-radius: 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em;
  white-space: nowrap; text-align: center;
  transition: transform var(--motion-fast) var(--ease-signal),
              background-color var(--motion-fast) var(--ease-signal),
              border-color var(--motion-fast) var(--ease-signal),
              color var(--motion-fast) var(--ease-signal);}
html[lang="ar"] .btn{letter-spacing: normal;}
.btn:hover{transform: translateY(-2px); --btn-bg: var(--signal-blue-text); border-color: var(--signal-blue-text);}
.btn.primary{--btn-bg: var(--ink-navy); --btn-fg: var(--surface-paper-2);}
.btn:active{transform: translateY(0); transition-duration: .08s;}
.btn__arrow{transition: transform .4s var(--ease);}
[dir="rtl"] .btn__arrow{transform: scaleX(-1);}
.btn:hover .btn__arrow{transform: translateX(3px);}
[dir="rtl"] .btn:hover .btn__arrow{transform: scaleX(-1) translateX(3px);}
.btn--ghost{--btn-bg: transparent; --btn-fg: var(--ink); border: 1px solid var(--line-3);}
.btn--ghost:hover{--btn-bg: var(--paper-2); border-color: var(--ink); box-shadow: var(--sh-1);}
.btn--outline-light{--btn-bg: transparent; --btn-fg: var(--on-dark); border: 1px solid var(--line-dark);}
.btn--outline-light:hover{--btn-bg: color-mix(in srgb, var(--surface-paper-2) 8%, transparent); border-color: color-mix(in srgb, var(--surface-paper-2) 35%, transparent);}
.btn--lg{padding: 1.0625rem 1.875rem; min-height: 3.375rem; font-size: 1rem;}
.btn--block{width: 100%;}
/* ---------- 6. Header — single row: logo → links → CTA ---------- */
.header{position: fixed; inset: 0 0 auto; z-index: 100;
  overflow: visible;
  background-color: var(--surface-paper);
  border-bottom: 1px solid var(--line);
  transition:
    background-color var(--motion-fast) var(--ease-signal),
    border-color var(--motion-fast) var(--ease-signal),
    box-shadow var(--motion-fast) var(--ease-signal),
    -webkit-backdrop-filter var(--motion-fast) var(--ease-signal),
    backdrop-filter var(--motion-fast) var(--ease-signal);}
.header.is-stuck{background-color: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-bottom-color: color-mix(in srgb, var(--line) 62%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink-navy) 9%, transparent);}
.header .nav{display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--header-h);}
.brand{--brand-mark-h: 32px;
  --brand-text-size: 9px;
  --brand-text-lh: 1.2;
  --brand-gap: 2px;
  display: inline-flex; align-items: center; flex: none; margin-inline-end: auto;}
.header .brand{margin-inline-end: 0;}
.brand:hover{opacity: .72;}
.brand__lockup{display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-gap);
  direction: ltr;
  unicode-bidi: isolate;}
.brand__text-box{display: grid;
  align-items: center;
  justify-items: center;
  height: calc(2 * var(--brand-text-size) * var(--brand-text-lh));
  min-height: calc(2 * var(--brand-text-size) * var(--brand-text-lh));
  font-family: Tomorrow, var(--sans-latin), sans-serif;
  font-size: var(--brand-text-size);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: var(--brand-text-lh);
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--text-muted-sm) 85%, var(--ink));
  overflow: hidden;}
.brand__text-box::before{content: "SYBER X FORTRESS";
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;}
.brand__text{grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;}
.brand__text span{display: block; line-height: var(--brand-text-lh);}
.brand img{height: var(--brand-mark-h); width: auto; max-width: none;
  object-fit: contain; object-position: center; display: block;
  flex: none;}
@media (min-width: 48rem) {
  .brand{--brand-mark-h: 36px;
    --brand-text-size: 10px;}
}
.footer .brand{--brand-mark-h: 42px;
  --brand-text-size: 10px;}
@media (min-width: 48rem) {
  .footer .brand{--brand-mark-h: 48px;
    --brand-text-size: 11px;}
}
.auth-page .brand{--brand-mark-h: 28px;
  --brand-text-size: 9px;}
.footer__claim{margin-top: var(--space-2); font-family: var(--sans-latin);
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted-sm);}
.navlinks, .header nav.navlinks{display: none;}
html[lang="en"] .header nav.navlinks{letter-spacing: .03em; text-transform: uppercase;}
.header nav.navlinks > a,
  .header nav.navlinks .nav-drop__btn{position: relative; padding: 0; border: 0; border-radius: 0;
    background: transparent;
    font: inherit; font-size: var(--fs-label); font-weight: 700;
    color: var(--text-muted-sm);
    white-space: nowrap;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;}
html[lang="ar"] .header nav.navlinks > a,
  html[lang="ar"] .header nav.navlinks .nav-drop__btn{font-size: var(--fs-label); padding-inline: 0;}
.header nav.navlinks > a:hover,
  .header nav.navlinks .nav-drop__btn:hover{color: var(--signal-blue-text);}
.header nav.navlinks > a[aria-current="true"],
  .header nav.navlinks > a[aria-current="page"],
  .header nav.navlinks .nav-drop__btn[aria-current="page"],
  .header nav.navlinks .nav-drop.is-open .nav-drop__btn,
  .header nav.navlinks .nav-drop:hover .nav-drop__btn{color: var(--ink);}
.nav-drop{position: relative;}
.nav-drop__btn{display: inline-flex; align-items: center; gap: .35rem;}
.nav-drop__chev{width: 8px; height: 8px; flex: none;
  transition: transform var(--motion-fast) var(--ease-signal);}
.nav-drop.is-open .nav-drop__chev,
.nav-drop:hover .nav-drop__chev{transform: rotate(180deg);}
.nav-drop__panel{list-style: none; margin: 0; padding: 0;}
[dir="rtl"] .header .nav-drop__panel{inset-inline-start: auto;
    inset-inline-end: 0;}
.header .nav-drop__panel::before{content: "";
    position: absolute;
    inset-inline-start: 0; inset-inline-end: 0;
    bottom: 100%; height: .85rem;}
.header .nav-drop:hover > .nav-drop__panel,
  .header .nav-drop:focus-within > .nav-drop__panel,
  .header .nav-drop.is-open > .nav-drop__panel{display: grid;}
.header .nav-drop__panel a{display: block;
    padding: .7rem .85rem;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    line-height: 1.45;
    white-space: normal;}
.header .nav-drop__panel a:hover{background: var(--surface-panel);
    color: var(--signal-blue-text);}
.header .nav-drop--cols-1 > .nav-drop__panel{grid-template-columns: 1fr;}
.header .nav-drop__all{grid-column: 1 / -1;
    margin-top: .15rem;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;}
.header .nav-drop__all a{color: var(--signal-blue-text);}
.lang-switch{display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 4.75rem; height: 2rem;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-paper-2);
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--sans-latin);}
.lang-switch__opt{display: grid; place-items: center;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em;
  color: var(--text-muted-sm);
  line-height: 1;}
.lang-switch__opt.is-current{background: var(--ink-navy);
  color: var(--surface-paper-2);
  pointer-events: none;}
.header .btn, .header .lang-switch{display: none;}
.menu-toggle, .burger{display: inline-flex; justify-content: center; align-items: center;
  width: 2.75rem; height: 2.75rem; margin-inline-start: auto;
  background: transparent; border-radius: 0; color: var(--ink);}
.menu-toggle__icon{width: 22px; height: 22px; display: block;
  overflow: visible;}
.menu-toggle__closed, .menu-toggle__open{transform-origin: 12px 12px;
  transition: opacity var(--motion-fast) var(--ease-signal),
              transform var(--motion-fast) var(--ease-signal);}
.menu-toggle__closed, .menu-toggle__open{fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;}
.menu-toggle__open{opacity: 0; transform: rotate(-75deg) scale(.7);}
.menu-toggle[aria-expanded="true"] .menu-toggle__closed{opacity: 0; transform: rotate(75deg) scale(.7);}
.menu-toggle[aria-expanded="true"] .menu-toggle__open{opacity: 1; transform: none;}
.header .nav > .brand,
.header .nav > .btn,
.header .nav > .lang-switch{flex: none;}
.header .nav .brand{margin-inline-end: 0;}
.header .nav .navlinks{margin-inline-start: auto;}
.mobile-menu{position: fixed; inset: var(--header-h) 0 auto; z-index: 99;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: .75rem var(--gutter) 1.75rem;
  display: grid; gap: .125rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-2), transform .35s var(--ease), visibility .35s;
  box-shadow: var(--sh-2);
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;}
.mobile-menu.is-open{transform: none; opacity: 1; visibility: visible;}
.mobile-menu > a:not(.btn){padding: .875rem .25rem; font-size: 1.1875rem; font-weight: 500;
  letter-spacing: -.02em; border-bottom: 1px solid var(--line-2);}
html[lang="ar"] .mobile-menu > a:not(.btn){letter-spacing: 0;}
.mobile-menu .btn{margin-top: 1.125rem;}
.mobile-menu .lang-switch{justify-self: start; margin-top: .875rem;}
.mobile-menu .nav-drop{display: grid;}
.mobile-menu .nav-drop__btn{display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .875rem .25rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  font: inherit; font-size: 1.1875rem; font-weight: 500;
  text-align: start; color: inherit; cursor: pointer;}
html[lang="ar"] .mobile-menu .nav-drop__btn{letter-spacing: 0;}
.mobile-menu .nav-drop__chev{width: 10px; height: 10px; opacity: .55;}
.mobile-menu .nav-drop__panel{display: none;
  list-style: none;
  margin: 0;
  padding: .25rem 0 .5rem;
  border-bottom: 1px solid var(--line-2);}
.mobile-menu .nav-drop.is-open .nav-drop__panel{display: grid;}
.mobile-menu .nav-drop.is-open .nav-drop__chev{transform: rotate(180deg);}
.mobile-menu .nav-drop__panel a{padding: .55rem .25rem .55rem 0.75rem;
  font-size: 1rem; font-weight: 500;
  border-bottom: 0;
  color: var(--text-muted);}
html[dir="rtl"] .mobile-menu .nav-drop__panel a{padding-inline: .75rem .25rem;}
.mobile-menu .nav-drop__all a{color: var(--signal-blue-text); font-weight: 700;}
.hero__panel .btn--outline-light{--btn-bg: transparent;
  --btn-fg: var(--hero-panel-ink);
  border: 1px solid rgb(255 255 255 / 0.28);}
.hero__panel .btn--outline-light:hover{--btn-bg: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.45);}
.contact__panel .btn{margin-top: 2rem;}
/* ---------- 14. Footer (paper — contrast with dark lockup) --------------- */
.footer{background: var(--surface-paper-2); color: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: var(--space-7) var(--space-4);
  margin-top: clamp(2rem, 4vw, 3rem);}
.footer__grid{display: grid;
  gap: var(--space-5);}
.footer__brand{grid-column: 1 / -1;}
.footer__blurb{margin-top: 1.125rem; color: var(--text-muted);
  font-size: var(--fs-sm); line-height: 1.7; max-width: 26rem;}
.footer h3{font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600;
  color: var(--signal-blue-text); margin-bottom: 1.125rem;}
html[lang="ar"] .footer h3{letter-spacing: normal; text-transform: none;}
.footer__col ul{display: grid; gap: .625rem;}
.footer__col a, .footer__col span{font-size: var(--fs-sm); color: var(--text-muted-sm);
  transition: color .3s var(--ease-2);}
.footer__col a:hover{color: var(--ink);}
.footer__bar{margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; font-size: var(--fs-xs); color: var(--text-muted-sm);}
.footer__legal{display: grid; gap: .25rem;}
.footer__legal strong{color: var(--ink); font-weight: 600; font-size: var(--fs-xs);}
.to-top{display: inline-flex; align-items: center; gap: .45rem;
  color: var(--signal-blue-text); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--sans-latin);}
.to-top:hover{color: var(--ink);}
.to-top svg{flex: none;}
.faq__aside nav{display: grid; gap: .625rem;}
.faq__aside nav a{display: flex;
  align-items: center;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
  padding-block: 11px;
  margin-block: -11px;
  transition: color .25s var(--ease-2);}
.faq__aside nav a:hover{color: var(--signal-blue-text);}
.header{view-transition-name: site-header;}
.offer__card .btn{margin-top: 1.5rem; max-width: 100%; white-space: normal; text-align: center;}
.form-foot .btn{flex: 1 1 13rem;}
.form-success .btn{margin-top: 1.5rem;}
html[lang="ar"] .svc-hero__card h2,
html[lang="ar"] .strip p,
html[lang="ar"] .footer h3{letter-spacing: normal;}
/* One-time homepage entrance — decorative, non-blocking, gated by html.has-intro.
   html.has-intro::before paints a paper veil from first CSS paint, before #site-intro
   is in the tree (it used to sit after </footer> and left header/hero uncovered). */
html.has-intro{background: var(--surface-paper);}


/* Service proof pages — sits alongside legacy site.css tokens. */
.sxf-svc-page {
  min-height: 100vh;
  background: var(--paper, #f4f7fa);
  color: var(--ink, #06182c);
  font-family: var(--font-tajawal), "Tajawal Fallback", Arial, sans-serif;
}

.sxf-svc-fortress-placeholder {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 10 / 8;
  border-radius: 0.75rem;
  background: radial-gradient(ellipse at 50% 20%, #0b2c4b 0%, #06182c 70%);
  contain: layout paint;
}

.sxf-svc-motion-ping {
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.sxf-svc-page[lang="en"],
html[lang="en"] .sxf-svc-page {
  font-family: var(--font-inter), "Inter Fallback", Arial, sans-serif;
}

/* Below-fold defer removed in P2J — content must paint without JS/scroll. */
.sxf-svc-wrap {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.sxf-svc-wrap--narrow {
  width: min(720px, calc(100% - 2rem));
}

.sxf-svc-section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.sxf-svc-section--muted {
  background: color-mix(in srgb, var(--paper, #f4f7fa) 88%, #0b2c4b 12%);
}

.sxf-svc-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #065fb8;
  text-transform: none;
}

.sxf-svc-h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  /* No entry animation — visible at first paint (LCP candidate). */
  opacity: 1;
  transform: none;
}

.sxf-svc-h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.sxf-svc-h3 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.sxf-svc-headline {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.4;
  color: #0b2c4b;
  opacity: 1;
  transform: none;
}

.sxf-svc-lede,
.sxf-svc-prose {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  max-width: 62ch;
  color: color-mix(in srgb, var(--ink, #06182c) 78%, transparent);
  opacity: 1;
  transform: none;
}

/*
 * CLS reserve only while the hero is stacked (mobile). At ≥900px the H1 is
 * one line and a 2-line min-height left a visible empty band under the title.
 */
@media (max-width: 899px) {
  .sxf-svc-h1 {
    min-height: calc(2 * 1.15 * 1em);
  }
  .sxf-svc-headline {
    min-height: calc(2 * 1.4 * 1em);
  }
  .sxf-svc-hero .sxf-svc-lede {
    min-height: calc(2 * 1.75 * 1em);
  }
}

.sxf-svc-hero {
  /* P2J: size to content — no forced viewport+ band. */
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(32, 203, 237, 0.12), transparent 50%),
    linear-gradient(180deg, #06182c 0%, #0b2c4b 55%, #06182c 100%);
  color: #f4f7fa;
}

.sxf-svc-hero .sxf-svc-wrap {
  width: min(1120px, calc(100% - 2rem));
}

.sxf-svc-hero .sxf-svc-eyebrow {
  color: #20cbed;
}

.sxf-svc-hero .sxf-svc-headline,
.sxf-svc-hero .sxf-svc-lede {
  color: color-mix(in srgb, #f4f7fa 88%, transparent);
}

.sxf-svc-hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}

@media (min-width: 900px) {
  .sxf-svc-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* Scene is decorative; aspect-ratio on .sxf-scene reserves box. Keep paint
   containment but avoid content-visibility on the above-fold scene (can defer
   size until near-viewport and contribute to shift on slow networks). */
.sxf-svc-hero .sxf-scene {
  contain: layout paint style;
  content-visibility: visible;
}

.sxf-svc-mini-fort {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

.sxf-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.sxf-svc-hero .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #f4f7fa;
  border: 1px solid color-mix(in srgb, #f4f7fa 55%, transparent);
  color: #f4f7fa;
}

.sxf-svc-hero .btn--ghost:hover {
  --btn-bg: color-mix(in srgb, #f4f7fa 12%, transparent);
  border-color: #20cbed;
  color: #fff;
}

/* Brand lockup uses Tomorrow from fonts-*.css */
.sxf-svc-page .brand__text {
  font-family: Tomorrow, var(--font-tajawal), "Tajawal Fallback", sans-serif;
}
html[lang="en"] .sxf-svc-page .brand__text {
  font-family: Tomorrow, var(--font-inter), "Inter Fallback", sans-serif;
}
.sxf-svc-compare {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .sxf-svc-compare {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.sxf-svc-compare__col {
  padding: 1.5rem 1.35rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  background: #fff;
}

.sxf-svc-compare__col ul {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: grid;
  gap: 0.65rem;
  line-height: 1.55;
}

.sxf-svc-compare__col--truth {
  border-color: color-mix(in srgb, #0877e6 35%, transparent);
  background: color-mix(in srgb, #0877e6 6%, #fff);
}

.sxf-svc-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: #0b2c4b;
}

.sxf-svc-cards {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .sxf-svc-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sxf-svc-card {
  padding: 1.5rem 1.35rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #06182c 4%, transparent);
}

.sxf-svc-card p {
  margin: 0;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink, #06182c) 78%, transparent);
}

.sxf-svc-not-suited {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid #0877e6;
  background: color-mix(in srgb, #0877e6 8%, #fff);
  line-height: 1.65;
}

.sxf-svc-scope {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .sxf-svc-scope {
    grid-template-columns: 1.4fr 0.8fr;
    align-items: start;
  }
}

.sxf-svc-scope__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sxf-svc-scope__tab {
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.65rem 0.9rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #0b2c4b 18%, transparent);
  background: #fff;
  color: #06182c;
  cursor: pointer;
}

.sxf-svc-scope__tab.is-active,
.sxf-svc-scope__tab[aria-selected="true"] {
  background: #06182c;
  color: #f4f7fa;
  border-color: #06182c;
}

.sxf-svc-scope__tab:focus-visible {
  outline: 2px solid #20cbed;
  outline-offset: 2px;
}

.sxf-svc-scope__panel {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 640px) {
  .sxf-svc-scope__panel {
    grid-template-columns: minmax(0, 220px) 1fr;
  }
}

.sxf-svc-scope__detail p {
  margin: 0;
  line-height: 1.7;
}

.sxf-svc-scope__out {
  padding: 1.5rem 1.35rem;
  border-radius: 0.75rem;
  background: #06182c;
  color: #f4f7fa;
}

.sxf-svc-scope__out ul {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: grid;
  gap: 0.75rem;
  line-height: 1.55;
  color: color-mix(in srgb, #f4f7fa 88%, transparent);
}

.sxf-svc-method {
  outline: none;
}

.sxf-svc-method:focus-visible {
  outline: 2px solid #20cbed;
  outline-offset: 4px;
  border-radius: 0.5rem;
}

.sxf-svc-method__steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .sxf-svc-method__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sxf-svc-method__step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: start;
  font: inherit;
  padding: 1.1rem 1rem;
  min-height: 44px;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  background: #fff;
  cursor: pointer;
  color: inherit;
}

.sxf-svc-method__step.is-active,
.sxf-svc-method__step[aria-selected="true"] {
  border-color: #0877e6;
  box-shadow: 0 0 0 1px #0877e6;
}

.sxf-svc-method__step:focus-visible {
  outline: 2px solid #20cbed;
  outline-offset: 2px;
}

.sxf-svc-method__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #0b2c4b;
  color: #f4f7fa;
  font-weight: 800;
  font-size: 0.875rem;
}

.sxf-svc-method__title {
  font-weight: 700;
}

.sxf-svc-method__body {
  padding: 1.25rem 1.35rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  line-height: 1.7;
  min-height: 5rem;
}

.sxf-svc-method__body p {
  margin: 0;
}

.sxf-svc-bullets {
  margin: 0 0 1.5rem;
  padding-inline-start: 1.2rem;
  display: grid;
  gap: 0.65rem;
  line-height: 1.6;
}

.sxf-svc-quality {
  margin: 0 0 2rem;
  font-weight: 600;
  line-height: 1.6;
}

.sxf-svc-report {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  box-shadow: 0 12px 40px color-mix(in srgb, #06182c 8%, transparent);
}

.sxf-svc-report__stamp {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.75rem;
  border: 2px dashed #065fb8;
  color: #06182c;
  background: #f4f7fa;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}

.sxf-svc-report__table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}

.sxf-svc-report__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.sxf-svc-report__table th,
.sxf-svc-report__table td {
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  text-align: start;
  vertical-align: top;
}

.sxf-svc-report__table th {
  font-weight: 700;
  background: color-mix(in srgb, #0b2c4b 6%, #fff);
}

.sxf-svc-prereq {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
  counter-reset: prereq;
}

.sxf-svc-prereq li {
  counter-increment: prereq;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  line-height: 1.6;
}

.sxf-svc-prereq li::before {
  content: counter(prereq);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #0877e6;
  color: #fff;
  font-weight: 800;
  font-size: 0.875rem;
}

.sxf-svc-faq {
  display: grid;
  gap: 0.75rem;
}

.sxf-svc-faq__item {
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.25rem 1.1rem 0.25rem;
}

.sxf-svc-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  padding-block: 1rem;
  list-style: none;
  min-height: 44px;
}

.sxf-svc-faq__item summary::-webkit-details-marker {
  display: none;
}

.sxf-svc-faq__item summary::after {
  content: "+";
  float: inline-end;
  font-weight: 800;
  color: #0877e6;
}

.sxf-svc-faq__item[open] summary::after {
  content: "−";
}

.sxf-svc-faq__item p {
  margin: 0 0 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink, #06182c) 78%, transparent);
}

.sxf-svc-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .sxf-svc-related {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sxf-svc-related a {
  display: block;
  padding: 1.25rem 1.15rem;
  min-height: 44px;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.45;
}

.sxf-svc-related a:hover {
  border-color: #0877e6;
  color: #065fb8;
}

.sxf-svc-cta {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(135deg, #06182c, #0b2c4b 55%, #065fb8);
  color: #f4f7fa;
  text-align: center;
}

.sxf-svc-cta .sxf-svc-prose {
  margin-inline: auto;
  color: color-mix(in srgb, #f4f7fa 88%, transparent);
}

.sxf-svc-cta .btn {
  margin-top: 0.5rem;
}


/* Fortress scene — global classes (not a Next CSS module) so no extra blocking chunk. */
.sxf-scene {
  --ink: #06182c;
  --ink2: #0b2c4b;
  --cy: #20cbed;
  --bl: #0877e6;
  --bd: #065fb8;
  --paper: #f4f7fa;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 10 / 8;
  border-radius: 0.75rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #0b2c4b 0%, #06182c 70%);
  content-visibility: auto;
  contain: layout paint style;
}

.sxf-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sxf-scene__layer {
  transform-box: fill-box;
  transform-origin: center;
}

.sxf-scene__check {
  opacity: 0;
}

.sxf-scene__sweep {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.sxf-scene__lit {
  opacity: 0.85;
}

.sxf-scene__l0 {
  --sep: 48px;
  --d: 0ms;
}
.sxf-scene__l1 {
  --sep: 18px;
  --d: 120ms;
}
.sxf-scene__l2 {
  --sep: -18px;
  --d: 240ms;
}
.sxf-scene__l3 {
  --sep: -48px;
  --d: 360ms;
}
.sxf-scene__c0 {
  --cd: 1100ms;
}
.sxf-scene__c1 {
  --cd: 1400ms;
}
.sxf-scene__c2 {
  --cd: 1700ms;
}
.sxf-scene__c3 {
  --cd: 2000ms;
}

@media (prefers-reduced-motion: reduce) {
  .sxf-scene__layer {
    transform: translateY(var(--sep, 0px));
  }
  .sxf-scene__check,
  .sxf-scene__lit {
    opacity: 1;
  }
  .sxf-scene__sweep {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sxf-scene--audit .sxf-scene__layer {
    animation: sxf-scene-separate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
  }
  .sxf-scene--audit .sxf-scene__check {
    animation: sxf-scene-appear 0.45s ease forwards;
    animation-delay: var(--cd, 0ms);
  }
  .sxf-scene--audit .sxf-scene__sweep {
    animation: sxf-scene-sweep 2.4s ease-in-out 0.4s 1 forwards;
  }
  .sxf-scene--audit .sxf-scene__lit {
    animation: sxf-scene-appear 0.5s ease forwards;
    animation-delay: 900ms;
  }
}

@keyframes sxf-scene-separate {
  from {
    transform: translateY(0);
    opacity: 0.55;
  }
  to {
    transform: translateY(var(--sep, 0px));
    opacity: 1;
  }
}

@keyframes sxf-scene-appear {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sxf-scene-sweep {
  0% {
    opacity: 0;
    transform: translateX(-40%) rotate(-8deg);
  }
  15% {
    opacity: 0.55;
  }
  85% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translateX(40%) rotate(-8deg);
  }
}

.sxf-scene--mini {
  max-width: 280px;
  aspect-ratio: 10 / 7;
}

.sxf-scene--mini .sxf-scene__layer {
  transform: none;
  opacity: 0.35;
}

.sxf-scene--mini .sxf-scene__layer.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(32, 203, 237, 0.55));
}

.sxf-scene--mini .sxf-scene__check,
.sxf-scene--mini .sxf-scene__sweep {
  display: none;
}


/* ---- P2J: restore live homepage desktop header/footer parity ---- */
@media (min-width: 72rem) {
  .header nav.navlinks {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-inline-start: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text-muted-sm);
  }
  html[lang="en"] .header nav.navlinks {
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .header .btn { display: inline-flex; }
  .header .lang-switch { display: inline-grid; }
  .menu-toggle, .burger { display: none; }
  .header .nav { gap: var(--space-3); justify-content: flex-start; }
  .header .nav-drop__panel {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 120;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-width: min(32rem, calc(100vw - 2 * var(--gutter)));
    width: min(32rem, calc(100vw - 2 * var(--gutter)));
    max-width: calc(100vw - 2 * var(--gutter));
    padding: .5rem;
    margin-top: .75rem;
    background: var(--surface-paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  [dir="rtl"] .header .nav-drop__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .header .nav-drop:hover > .nav-drop__panel,
  .header .nav-drop:focus-within > .nav-drop__panel,
  .header .nav-drop.is-open > .nav-drop__panel { display: grid; }
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer__grid { grid-template-columns: 1.35fr .9fr .8fr .95fr; }
  .footer__brand { grid-column: auto; }
}


/* ---- P2J: page visual fixes ---- */
.sxf-svc-section--defer {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.sxf-svc-h1,
.sxf-svc-h2,
.sxf-svc-h3,
.sxf-svc-headline,
.sxf-svc-method__title {
  text-wrap: balance;
}

.sxf-svc-hero {
  min-height: 0;
  align-items: stretch;
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem);
}

.sxf-svc-hero .sxf-scene,
.sxf-svc-hero .sxf-scene--audit {
  max-width: none;
  width: 100%;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  content-visibility: visible;
  contain: none;
}

.sxf-svc-hero .sxf-scene svg {
  max-height: min(58vh, 520px);
}

.sxf-scene--audit {
  aspect-ratio: 10 / 8;
}

.sxf-scene--mini {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  aspect-ratio: 10 / 8;
  border-radius: 0.75rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #0b2c4b 0%, #06182c 70%);
}

.sxf-scene--mini svg {
  width: 100%;
  height: 100%;
}

.sxf-scene__layer {
  transition: opacity .35s ease, filter .35s ease;
}
.sxf-scene--sel-governance .sxf-scene__layer:not(.sxf-scene__l3),
.sxf-scene--sel-systems .sxf-scene__layer:not(.sxf-scene__l2),
.sxf-scene--sel-controls .sxf-scene__layer:not(.sxf-scene__l1),
.sxf-scene--sel-cloud .sxf-scene__layer:not(.sxf-scene__l0) {
  opacity: 0.38;
  filter: saturate(0.7);
}
.sxf-scene__layer.is-active {
  opacity: 1;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .sxf-scene__layer { transition: none; }
  .sxf-scene__halo,
  .sxf-scene__sweep,
  .sxf-scene__win { animation: none !important; }
}

.sxf-svc-method--static {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.sxf-svc-method__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
}
.sxf-svc-method__copy { min-width: 0; }
.sxf-svc-method__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.sxf-svc-method__body {
  margin: 0;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink, #06182c) 78%, transparent);
}
@media (min-width: 768px) {
  .sxf-svc-method--static {
    grid-template-columns: 1fr 1fr;
  }
}

.sxf-svc-scope__intro { margin-top: 0.5rem; }
.sxf-svc-scope__note {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink, #06182c) 72%, transparent);
}
.sxf-svc-scope__layers {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.sxf-svc-scope__layer {
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
}
.sxf-svc-scope__layer p { margin: 0; line-height: 1.7; }
.sxf-svc-scope__layer.is-active {
  border-color: #0877e6;
  box-shadow: 0 0 0 1px color-mix(in srgb, #0877e6 35%, transparent);
}
.sxf-svc-scope__visual {
  margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
  .sxf-svc-scope {
    grid-template-columns: minmax(0, 280px) 1.2fr 0.85fr;
    align-items: start;
  }
  .sxf-svc-scope__visual { margin: 0; }
}

/* Gap cards < 640px; table at wider widths */
.sxf-svc-gap-cards {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.sxf-svc-gap-card {
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  display: grid;
  gap: 0.55rem;
}
.sxf-svc-gap-card__row {
  display: grid;
  grid-template-columns: minmax(5rem, 34%) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}
.sxf-svc-gap-card__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #065fb8;
}
html[lang="ar"] .sxf-svc-gap-card__label {
  letter-spacing: 0;
  text-transform: none;
}
.sxf-svc-gap-card__value {
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 639.98px) {
  .sxf-svc-report__table-wrap { display: none; }
}
@media (min-width: 640px) {
  .sxf-svc-gap-cards { display: none; }
}

.sxf-svc-related__card {
  display: grid;
  gap: 0.55rem;
  padding: 1.25rem 1.15rem;
  min-height: 44px;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  color: inherit;
  text-decoration: none;
}
.sxf-svc-related__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
}
.sxf-svc-related__desc {
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink, #06182c) 72%, transparent);
}
.sxf-svc-related__arrow {
  flex: none;
}
html[dir="rtl"] .sxf-svc-related__arrow {
  transform: scaleX(-1);
}
.sxf-svc-related a.sxf-svc-related__card:hover {
  border-color: #0877e6;
  color: #065fb8;
}



/* ---- P2J follow-up ---- */
.sxf-scene {
  content-visibility: visible !important;
  contain: layout paint style;
}

.sxf-svc-hero .sxf-scene,
.sxf-svc-hero .sxf-scene--audit {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  contain: none;
  aspect-ratio: 10 / 8;
}

.sxf-svc-hero .sxf-scene svg {
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
}

.sxf-svc-method--static .sxf-svc-method__body {
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
  margin: 0;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink, #06182c) 78%, transparent);
}

.sxf-svc-method--static .sxf-svc-method__title {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.sxf-svc-hero {
  min-height: 0 !important;
  align-items: stretch;
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem);
}

@media (prefers-reduced-motion: no-preference) {
  .sxf-scene__win {
    animation: sxf-scene-appear 0.6s ease 0.7s both;
  }
  .sxf-scene__halo {
    animation: sxf-scene-appear 1.1s ease 0.3s both;
  }
}



/* ---- P3: header wrap parity + RTL arrows + PT visuals ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
html[lang="ar"] .btn__arrow,
[dir="rtl"] .btn__arrow,
html[dir="rtl"] .btn__arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .btn:hover .btn__arrow,
html[dir="rtl"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(3px);
}
[dir="rtl"] .sxf-svc-related__arrow {
  transform: scaleX(-1);
}

.sxf-svc-page--pt .sxf-svc-hero {
  background:
    radial-gradient(ellipse at 75% 10%, rgba(255, 90, 61, 0.14), transparent 42%),
    radial-gradient(ellipse at 20% 80%, rgba(32, 203, 237, 0.08), transparent 45%),
    linear-gradient(180deg, #040b14 0%, #0a1628 55%, #06101c 100%);
}

.sxf-svc-path-dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.sxf-svc-path-dots--separate {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
}
.sxf-svc-path-dots__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #ff5a3d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff5a3d 22%, transparent);
}
.sxf-svc-path-dots__line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 1.25rem;
  background: linear-gradient(90deg, #ff5a3d, #20cbed);
  border-radius: 999px;
}
.sxf-svc-path-dots--joined {
  display: flex;
  align-items: center;
  width: min(100%, 14rem);
}

.sxf-svc-scope__services {
  list-style: none;
  margin: 1rem 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 720px) {
  .sxf-svc-scope__services { grid-template-columns: 1fr 1fr; }
}
.sxf-svc-scope__service {
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
}
.sxf-svc-page--pt .sxf-svc-scope__service {
  background: color-mix(in srgb, #0b2c4b 6%, #fff);
  border-color: color-mix(in srgb, #ff5a3d 18%, #0b2c4b 12%);
}
.sxf-svc-scope__services-note {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--ink, #06182c) 72%, transparent);
}

.sxf-svc-finding__card {
  padding: 1.15rem 1.2rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #0b2c4b 5%, #fff);
  border: 1px solid color-mix(in srgb, #ff5a3d 22%, #0b2c4b 12%);
}
.sxf-svc-finding__meta {
  margin: 0 0 1rem;
  font-weight: 800;
  line-height: 1.45;
}
.sxf-svc-finding__sev { color: #c0392b; }
.sxf-svc-finding__dl {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.sxf-svc-finding__dl dt {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #065fb8;
  margin: 0 0 0.2rem;
}
html[lang="ar"] .sxf-svc-finding__dl dt {
  letter-spacing: 0;
  text-transform: none;
}
.sxf-svc-finding__dl dd {
  margin: 0;
  line-height: 1.6;
}
.sxf-svc-finding__summary {
  margin: 1.15rem 0 0;
  font-weight: 700;
  line-height: 1.55;
}

.sxf-atk__path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.sxf-atk__weak {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.sxf-atk__cut {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sxf-scene--pt .sxf-atk__path {
    animation: sxf-atk-draw 1.6s ease forwards;
  }
  .sxf-scene--pt .sxf-atk__weak {
    animation: sxf-atk-pulse 0.55s ease 1.55s 1 forwards;
  }
  .sxf-scene--pt .sxf-atk__cut {
    animation: sxf-atk-cut 0.35s ease 2.15s 1 forwards;
  }
  .sxf-scene--pt-mini .sxf-atk__path {
    animation: sxf-atk-draw 0.9s ease forwards;
  }
  .sxf-scene--pt-mini .sxf-atk__weak {
    animation: sxf-atk-pulse 0.4s ease 0.85s 1 forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sxf-atk__path { stroke-dashoffset: 0; }
  .sxf-atk__weak,
  .sxf-atk__cut { opacity: 1; animation: none !important; }
}
@keyframes sxf-atk-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes sxf-atk-pulse {
  0% { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0.95; transform: scale(1); }
}
@keyframes sxf-atk-cut {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}



/* ---- P4: TBT — defer scene animation until after first paint; scope CSS selection ---- */
.sxf-atk__path,
.sxf-atk__weak,
.sxf-atk__cut,
.sxf-scene--audit .sxf-scene__layer,
.sxf-scene--audit .sxf-scene__sweep,
.sxf-scene--audit .sxf-scene__check,
.sxf-scene--audit .sxf-scene__lit,
.sxf-scene__win,
.sxf-scene__halo {
  animation: none !important;
}
html.sxf-scenes-ready .sxf-scene--pt .sxf-atk__path {
  animation: sxf-atk-draw 1.6s ease forwards !important;
}
html.sxf-scenes-ready .sxf-scene--pt .sxf-atk__weak {
  animation: sxf-atk-pulse 0.55s ease 1.55s 1 forwards !important;
}
html.sxf-scenes-ready .sxf-scene--pt .sxf-atk__cut {
  animation: sxf-atk-cut 0.35s ease 2.15s 1 forwards !important;
}
html.sxf-scenes-ready .sxf-scene--pt-mini .sxf-atk__path {
  animation: sxf-atk-draw 0.9s ease forwards !important;
}
html.sxf-scenes-ready .sxf-scene--pt-mini .sxf-atk__weak {
  animation: sxf-atk-pulse 0.4s ease 0.85s 1 forwards !important;
}
@media (prefers-reduced-motion: no-preference) {
  html.sxf-scenes-ready .sxf-scene--audit .sxf-scene__layer {
    animation: sxf-scene-separate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    animation-delay: var(--d, 0ms) !important;
  }
  html.sxf-scenes-ready .sxf-scene--audit .sxf-scene__sweep {
    animation: sxf-scene-sweep 2.4s ease-in-out 0.4s 1 forwards !important;
  }
}

/* Mini fortress / attack path — island sets data-active-layer on .sxf-svc-scope__main */
.sxf-scene--mini .sxf-scene__layer { opacity: 0.38; filter: saturate(0.7); }
.sxf-svc-section[data-active-layer="governance"] .sxf-scene--mini .sxf-scene__l3,
.sxf-svc-section[data-active-layer="systems"] .sxf-scene--mini .sxf-scene__l2,
.sxf-svc-section[data-active-layer="controls"] .sxf-scene--mini .sxf-scene__l1,
.sxf-svc-section[data-active-layer="cloud"] .sxf-scene--mini .sxf-scene__l0,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="governance"]) .sxf-scene--mini .sxf-scene__l3,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="systems"]) .sxf-scene--mini .sxf-scene__l2,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="controls"]) .sxf-scene--mini .sxf-scene__l1,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="cloud"]) .sxf-scene--mini .sxf-scene__l0 {
  opacity: 1;
  filter: none;
}

.sxf-atk__group { opacity: 0; pointer-events: none; }
.sxf-svc-section[data-active-layer="web"] .sxf-atk__group--web,
.sxf-svc-section[data-active-layer="external"] .sxf-atk__group--external,
.sxf-svc-section[data-active-layer="internal"] .sxf-atk__group--internal,
.sxf-svc-section[data-active-layer="mobile"] .sxf-atk__group--mobile,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="web"]) .sxf-atk__group--web,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="external"]) .sxf-atk__group--external,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="internal"]) .sxf-atk__group--internal,
.sxf-svc-scope:has(.sxf-svc-scope__main[data-active-layer="mobile"]) .sxf-atk__group--mobile,
.sxf-scene--pt:not(.sxf-scene--pt-mini) .sxf-atk__group { opacity: 1; }

.sxf-svc-scope__layers .sxf-svc-scope__layer { opacity: 0.72; }
.sxf-svc-scope__layers[data-active] .sxf-svc-scope__layer[data-layer] {
  border-color: color-mix(in srgb, #0b2c4b 12%, transparent);
  box-shadow: none;
}
.sxf-svc-section[data-active-layer="governance"] .sxf-svc-scope__layer[data-layer="governance"],
.sxf-svc-section[data-active-layer="systems"] .sxf-svc-scope__layer[data-layer="systems"],
.sxf-svc-section[data-active-layer="controls"] .sxf-svc-scope__layer[data-layer="controls"],
.sxf-svc-section[data-active-layer="cloud"] .sxf-svc-scope__layer[data-layer="cloud"],
.sxf-svc-section[data-active-layer="web"] .sxf-svc-scope__layer[data-layer="web"],
.sxf-svc-section[data-active-layer="external"] .sxf-svc-scope__layer[data-layer="external"],
.sxf-svc-section[data-active-layer="internal"] .sxf-svc-scope__layer[data-layer="internal"],
.sxf-svc-section[data-active-layer="mobile"] .sxf-svc-scope__layer[data-layer="mobile"],
.sxf-svc-scope__main[data-active-layer="governance"] .sxf-svc-scope__layer[data-layer="governance"],
.sxf-svc-scope__main[data-active-layer="systems"] .sxf-svc-scope__layer[data-layer="systems"],
.sxf-svc-scope__main[data-active-layer="controls"] .sxf-svc-scope__layer[data-layer="controls"],
.sxf-svc-scope__main[data-active-layer="cloud"] .sxf-svc-scope__layer[data-layer="cloud"],
.sxf-svc-scope__main[data-active-layer="web"] .sxf-svc-scope__layer[data-layer="web"],
.sxf-svc-scope__main[data-active-layer="external"] .sxf-svc-scope__layer[data-layer="external"],
.sxf-svc-scope__main[data-active-layer="internal"] .sxf-svc-scope__layer[data-layer="internal"],
.sxf-svc-scope__main[data-active-layer="mobile"] .sxf-svc-scope__layer[data-layer="mobile"] {
  opacity: 1;
  border-color: #0877e6;
  box-shadow: 0 0 0 1px color-mix(in srgb, #0877e6 35%, transparent);
}

/* Hub page */
.sxf-hub-explorer__opts {
  list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem;
}
@media (min-width: 720px) {
  .sxf-hub-explorer__opts { grid-template-columns: repeat(5, 1fr); }
}
.sxf-hub-explorer__opt {
  display: block; width: 100%; text-align: start;
  padding: 0.85rem 1rem; border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  background: #fff; cursor: pointer; font: inherit; font-weight: 700;
}
.sxf-hub-explorer__opt.is-active,
.sxf-hub-explorer__opt[aria-pressed="true"] {
  border-color: #0877e6; color: #065fb8;
}
.sxf-hub-explorer__panel[hidden] { display: none !important; }
.sxf-hub-groups { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
.sxf-hub-group__line { margin: 0.35rem 0 1rem; color: color-mix(in srgb, var(--ink,#06182c) 72%, transparent); }
.sxf-hub-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 720px) {
  .sxf-hub-cards { grid-template-columns: 1fr 1fr; }
}
.sxf-hub-card {
  display: grid; gap: 0.4rem; padding: 1.15rem 1.2rem;
  border-radius: 0.75rem; background: #fff;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  color: inherit; text-decoration: none;
}
.sxf-hub-card__title { display: flex; justify-content: space-between; gap: 0.75rem; font-weight: 800; }
.sxf-hub-card__when { font-size: 0.95rem; line-height: 1.55; color: color-mix(in srgb, var(--ink,#06182c) 72%, transparent); }
html[dir="rtl"] .sxf-hub-card .sxf-svc-related__arrow { transform: scaleX(-1); }
.sxf-hub-strip { display: grid; gap: 1rem; }
@media (min-width: 720px) { .sxf-hub-strip { grid-template-columns: 1fr 1fr; } }
.sxf-hub-method {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center;
  font-weight: 800;
}
.sxf-hub-method li:not(:last-child)::after {
  content: "←"; margin-inline-start: 0.75rem; opacity: 0.45; font-weight: 600;
}
html[lang="en"] .sxf-hub-method li:not(:last-child)::after { content: "→"; }
.sxf-hub-start__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }


/* Hub / homepage need lighting + a11y */
.sxf-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sxf-hub-explorer {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.sxf-hub-explorer__visual .sxf-scene {
  max-width: 520px;
  margin-inline: auto;
}
.sxf-hub-explorer__opt-inner {
  display: grid;
  gap: 0.25rem;
}
.sxf-hub-explorer__q {
  display: block;
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink,#06182c) 70%, transparent);
}
.sxf-hub-explorer__opt:focus-visible {
  outline: 2px solid #0877e6;
  outline-offset: 2px;
}
.sxf-hub-explorer[data-enhanced="1"] .sxf-hub-explorer__panel:not(.is-active) {
  display: none !important;
}
.sxf-hub-card__cta {
  font-size: 0.9rem;
  font-weight: 700;
  color: #065fb8;
}

/* Default dim layers inside explorer fortress; light by need */
.sxf-hub-explorer .sxf-scene__layer,
.sxf-hub-explorer .sxf-scene__ground,
.sxf-hub-explorer .sxf-scene__gate,
.sxf-hub-explorer .sxf-scene__sweep {
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.sxf-hub-explorer .sxf-scene__layer { filter: saturate(0.55) brightness(0.92); opacity: 0.78; }
.sxf-hub-explorer .sxf-scene__ground { filter: saturate(0.5) brightness(0.9); opacity: 0.7; }
.sxf-hub-explorer .sxf-scene__sweep { opacity: 0; }
.sxf-hub-explorer[data-active-need="audit-testing"] .sxf-scene__l2,
.sxf-hub-explorer[data-active-need="audit-testing"] .sxf-scene__sweep {
  filter: none; opacity: 1;
}
.sxf-hub-explorer[data-active-need="governance-risk"] .sxf-scene__ground {
  filter: none; opacity: 1;
}
.sxf-hub-explorer[data-active-need="incident"] .sxf-scene__gate,
.sxf-hub-explorer[data-active-need="incident"] .sxf-scene__l2 {
  filter: none; opacity: 1;
}
.sxf-hub-explorer[data-active-need="build-operate"] .sxf-scene__l1 {
  filter: none; opacity: 1;
}
.sxf-hub-explorer[data-active-need="training"] .sxf-scene__l3 {
  filter: none; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sxf-hub-explorer .sxf-scene__layer,
  .sxf-hub-explorer .sxf-scene__ground,
  .sxf-hub-explorer .sxf-scene__gate,
  .sxf-hub-explorer .sxf-scene__sweep {
    transition: none;
  }
}


/* CSS brand cycle — no JS hydration */
.sxf-brand-cycle {
  position: relative;
  display: grid;
}
.sxf-brand-cycle__a,
.sxf-brand-cycle__b {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sxf-brand-cycle__b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sxf-brand-cycle__a {
    animation: sxf-brand-a 13s ease-in-out infinite;
  }
  .sxf-brand-cycle__b {
    animation: sxf-brand-b 13s ease-in-out infinite;
  }
}
@keyframes sxf-brand-a {
  0%, 69% { opacity: 1; }
  77%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sxf-brand-b {
  0%, 69% { opacity: 0; }
  77%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sxf-brand-cycle__a { opacity: 1; }
  .sxf-brand-cycle__b { opacity: 0; }
}

.sxf-svc-method--cycle {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 720px) {
  .sxf-svc-method--cycle {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sxf-svc-method--cycle .sxf-svc-method__item {
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  padding: 1rem;
  background: #fff;
}

/* Incident alert accent (scene + selector only) */
.sxf-svc-page--incident {
  --sxf-alert: #b45309;
}
.sxf-svc-page--incident .sxf-inc-sel__tab.is-active,
.sxf-svc-page--incident .sxf-inc-sel__tab[aria-selected="true"] {
  color: var(--sxf-alert);
  border-color: var(--sxf-alert);
}
.sxf-inc-sel__tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0;
}
.sxf-inc-sel__tab {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 0.55rem 0.9rem; border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent);
  background: #fff;
}
.sxf-inc-sel__panel[hidden] { display: none !important; }
.sxf-inc-sel[data-enhanced="0"] .sxf-inc-sel__panel { display: grid !important; }
.sxf-roadmap, .sxf-risk-register, .sxf-policy-sample, .sxf-runbook {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #0b2c4b 22%, transparent);
  background: color-mix(in srgb, #f4f7fa 80%, #fff);
}
.sxf-sample-stamp {
  font-size: 0.85rem; font-weight: 700; color: #334155;
  margin: 0 0 0.75rem;
}
.sxf-risk-matrix {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  max-width: 280px; margin: 0.75rem 0 1rem;
}
.sxf-risk-matrix span {
  aspect-ratio: 1; border-radius: 2px;
  background: color-mix(in srgb, #0b2c4b 8%, #fff);
  border: 1px solid color-mix(in srgb, #0b2c4b 10%, transparent);
  font-size: 0.65rem; display: grid; place-items: center; font-weight: 700;
}
.sxf-risk-matrix .is-placed { background: color-mix(in srgb, #0877e6 22%, #fff); color: #065fb8; }
.sxf-hierarchy__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sxf-hierarchy__panels { margin-top: 0.85rem; display: grid; gap: 0.65rem; }
.sxf-hierarchy__panel { padding: 0.85rem 1rem; border-radius: 0.65rem; border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent); opacity: 0.78; }
.sxf-hierarchy[data-active="policy"] .sxf-hierarchy__panel--policy,
.sxf-hierarchy[data-active="standard"] .sxf-hierarchy__panel--standard,
.sxf-hierarchy[data-active="procedure"] .sxf-hierarchy__panel--procedure { opacity: 1; border-color: #0877e6; }
.sxf-blueprint-stops { display: grid; gap: 0.65rem; }
.sxf-blueprint-stops__item { padding: 0.75rem 1rem; border-radius: 0.65rem; border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent); opacity: 0.75; }
.sxf-blueprint-stops[data-active="current"] .sxf-blueprint-stops__item--current,
.sxf-blueprint-stops[data-active="roadmap"] .sxf-blueprint-stops__item--roadmap,
.sxf-blueprint-stops[data-active="target"] .sxf-blueprint-stops__item--target { opacity: 1; border-color: #0877e6; }


.sxf-svc-scope--spaced { margin-top: 1.5rem; }
.sxf-svc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sxf-svc-table th, .sxf-svc-table td { border: 1px solid color-mix(in srgb, #0b2c4b 14%, transparent); padding: 0.45rem 0.55rem; text-align: start; }
.sxf-svc-table-wrap { overflow-x: auto; }

/* Package 6 — systems / managed / training / supply / tenders */
.sxf-svc-page--systems .sxf-arch-layers { display: grid; gap: 0.65rem; }
.sxf-arch-layers__item { padding: 0.75rem 1rem; border-radius: 0.65rem; border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent); opacity: 0.75; }
.sxf-arch-layers[data-active="network"] .sxf-arch-layers__item--network,
.sxf-arch-layers[data-active="identity"] .sxf-arch-layers__item--identity,
.sxf-arch-layers[data-active="monitoring"] .sxf-arch-layers__item--monitoring,
.sxf-arch-layers[data-active="cloud"] .sxf-arch-layers__item--cloud { opacity: 1; border-color: #0877e6; }
.sxf-arch-sample {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #0b2c4b 22%, transparent);
  background: color-mix(in srgb, #f4f7fa 80%, #fff);
}
.sxf-arch-diagram { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 640 / 360; }
.sxf-arch-diagram__layer--identity { fill: #0877e6; }
.sxf-arch-diagram__layer--monitoring { fill: #0d4a70; }
.sxf-arch-diagram__layer--network { fill: #154469; }
.sxf-arch-diagram__layer--cloud { fill: #20cbed; }

.sxf-ops-path {
  display: grid; gap: 0.65rem; margin: 1rem 0;
  list-style: none; padding: 0;
}
@media (min-width: 720px) {
  .sxf-ops-path { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sxf-ops-path__step {
  padding: 0.85rem 0.9rem; border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  background: #fff; min-height: 7.5rem;
}
.sxf-ops-path__num {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: color-mix(in srgb, #0877e6 14%, #fff); color: #065fb8;
  font-size: 0.8rem; font-weight: 700; margin-inline-end: 0.35rem;
}
.sxf-ops-path-sel { margin-top: 0.75rem; }
.sxf-ops-report {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #0b2c4b 22%, transparent);
  background: color-mix(in srgb, #f4f7fa 80%, #fff);
}
.sxf-ops-report__items { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.sxf-ops-report__items li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.55rem; border-radius: 0.45rem;
  background: #fff; border: 1px solid color-mix(in srgb, #0b2c4b 10%, transparent);
}
.sxf-svc-page--training {
  --sxf-train-warm: #c4a574;
}
.sxf-svc-page--training .sxf-train-roles__tab.is-active,
.sxf-svc-page--training .sxf-inc-sel__tab.is-active {
  border-color: var(--sxf-train-warm);
}
.sxf-measure-panel {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #c4a574 40%, #0b2c4b 12%);
  background: color-mix(in srgb, #faf6f0 70%, #fff);
}
.sxf-measure-panel__metrics { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.sxf-measure-panel__pair {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  margin-top: 0.35rem;
}
.sxf-measure-panel__pair span {
  min-width: 6.5rem; padding: 0.4rem 0.55rem; border-radius: 0.45rem;
  background: #fff; border: 1px solid color-mix(in srgb, #0b2c4b 10%, transparent);
}
.sxf-measure-panel__completion { margin-top: 0.85rem; font-weight: 700; }
.sxf-supply-cats {
  list-style: none; padding: 0; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1rem 0;
}
.sxf-supply-cats__item {
  display: grid; gap: 0.5rem; padding: 1rem;
  border-radius: 0.65rem; border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  background: #fff; min-height: 6.5rem;
}
.sxf-supply-cats__icon {
  width: 2rem; height: 2rem; border-radius: 0.4rem;
  background: color-mix(in srgb, #0877e6 16%, #fff);
  border: 1px solid color-mix(in srgb, #0877e6 30%, transparent);
}
.sxf-svc-page--supply .sxf-svc-method {
  display: grid; gap: 0.65rem;
}
@media (min-width: 720px) {
  .sxf-svc-page--supply .sxf-svc-method {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sxf-svc-page--supply .sxf-svc-method__item {
  position: relative;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in srgb, #0b2c4b 12%, transparent);
  background: #fff; padding: 0.9rem;
}
.sxf-compare-sample {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #0b2c4b 22%, transparent);
  background: color-mix(in srgb, #f4f7fa 80%, #fff);
}
.sxf-compare-table th[scope="col"]:nth-child(2) { background: color-mix(in srgb, #0877e6 10%, #fff); }

.sxf-tender-stages { margin: 1rem 0; }
.sxf-tender-checklist {
  margin-top: 1rem; padding: 1.15rem 1.25rem; border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, #0b2c4b 22%, transparent);
  background: color-mix(in srgb, #f4f7fa 80%, #fff);
}
.sxf-tender-checklist__list { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.sxf-tender-checklist__list li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-radius: 0.45rem;
  background: #fff; border: 1px solid color-mix(in srgb, #0b2c4b 10%, transparent);
}
.sxf-tender-checklist__mark { font-weight: 700; color: #065fb8; min-width: 1.1rem; }
.sxf-tender-checklist__list .is-pending .sxf-tender-checklist__mark { color: #64748b; }

/* ---- P7: hero layout (header offset, columns, mobile bleed) ---- */
.sxf-svc-hero {
  min-height: 0 !important;
  display: block;
  align-items: unset;
  padding-block: 0;
  padding-top: calc(var(--header-h, 80px) + 72px);
  padding-bottom: 64px;
  box-sizing: border-box;
}
.sxf-svc-hero .sxf-svc-wrap.sxf-svc-hero__grid {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}
.sxf-svc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: center;
}
.sxf-svc-hero__art {
  width: 118%;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: visible;
}
.sxf-svc-hero__art .sxf-svc-hero__img,
.sxf-svc-hero__art .sxf-scene,
.sxf-svc-hero__art .sxf-scene--audit,
.sxf-svc-hero__art > svg,
.sxf-svc-hero__art > * {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: transparent;
}
/* Keep HTML width/height aspect-ratio on <img> so the hero box is reserved
   before the SVG bytes arrive (aspect-ratio:auto caused CLS ~0.35 on mobile). */
.sxf-svc-hero__img {
  object-fit: contain;
}

@media (max-width: 700px) {
  .sxf-svc-hero {
    padding-top: var(--header-h, 80px);
    padding-bottom: 8px;
  }
  .sxf-svc-hero .sxf-svc-wrap.sxf-svc-hero__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sxf-svc-hero__art {
    order: -1;
    width: 100%;
    margin-top: -12px;
  }
  .sxf-svc-hero__copy {
    padding-top: 36px;
    padding-inline: 1rem;
  }
}