/* ============================================================
   global.css -- base reset, loaded on every page before style.css
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

ul, ol {
  padding: 0;
}

:root {
  --brand-blue: #3E63DD;
  --brand-purple: #7B3FE4;
  --brand-magenta: #C13FBD;
  --brand-navy: #2b354f;
  --brand-navy-soft: #47536b;
  --brand-bg-tint: #f1f5fd;
  --band: linear-gradient(135deg, #1B2A78 0%, #3E63DD 52%, #7B3FE4 100%);
}

/* ---- Static-site safety override ----
   The original site hides freshly-rendered elements (opacity/visibility) until
   a scroll-triggered JS animation reveals them. On a hardcoded static site we
   don't want content's visibility depending on JS executing correctly, so we
   guarantee it's visible by default. THIS RULE MUST STAY -- without it,
   icon-box widgets and other elementor-invisible-tagged sections render
   completely blank. (Lost once already during a rebuild -- hence this being
   its own permanent script instead of an ad-hoc shell heredoc.) */
.elementor-invisible{visibility:visible!important;opacity:1!important}

/* Masterlayer's own "reveal" scroll-animation system (separate from Elementor's
   native one) also hides content until JS adds an .is-in-view class -- same
   problem, same fix. */
.master-fancy-image.reveal>*{opacity:1!important}
.master-fancy-image.reveal:after{display:none!important}

/* ============================================================
   Mega-menu: "Our Services" nav dropdown, 2-category layout
   ============================================================ */
#main-nav .sub-menu.mega-menu {
  width: 460px;
  padding: 22px 26px;
  columns: 2;
  column-gap: 28px;
}
#main-nav .sub-menu.mega-menu.mega-menu-3col {
  width: 680px;
  columns: 3;
}
#main-nav .sub-menu.mega-menu.mega-menu-4col {
  width: 860px;
  columns: 4;
}
/* Wide mega-menus always centre under their trigger item, regardless of the
   theme's left/right edge-detection class -- that logic (flip to right: 0
   for triggers near the screen edge) was tuned for the old 268px dropdown;
   right-aligning an 860px menu the same way pushes it off the OTHER edge
   instead. Centring keeps any width safely on-screen at desktop widths. */
#main-nav .sub-menu.mega-menu-3col,
#main-nav .sub-menu.mega-menu-4col {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}
#main-nav .sub-menu.mega-menu .mega-menu-col3,
#main-nav .sub-menu.mega-menu .mega-menu-col4 { break-before: column; }
#main-nav .sub-menu.mega-menu li {
  break-inside: avoid;
}
#main-nav .sub-menu.mega-menu .mega-menu-heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue, #3E63DD);
  padding: 0 0 4px;
  margin-top: 4px;
}
#main-nav .sub-menu.mega-menu li:first-child.mega-menu-heading {
  margin-top: 0;
}
#main-nav .sub-menu.mega-menu .mega-menu-heading.mega-menu-col2 {
  break-before: column;
}
#main-nav .sub-menu.mega-menu .mega-menu-heading em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9ca9c4;
  margin-top: 2px;
}
#main-nav .sub-menu.mega-menu li a {
  font-size: 13.5px;
  padding: 8px 0 !important;
}
#main-nav .sub-menu.mega-menu .mega-menu-viewall a,
#main-nav .sub-menu.mega-menu a.mega-menu-viewall {
  color: var(--brand-blue, #3E63DD) !important;
  font-weight: 600;
}
@media (max-width: 600px) {
  #main-nav .sub-menu.mega-menu {
    width: 100%;
    columns: 1;
  }
}

/* ============================================================
   Scroll-reveal animation system (progressive enhancement)
   ============================================================
   SAFETY RULE: .scroll-reveal elements are FULLY VISIBLE by default.
   The hidden/animated state ONLY applies once JS has confirmed it's
   running (via the .js class on <html>) AND IntersectionObserver is
   supported. If JS fails, is blocked, or errors out anywhere else on
   the page, content still displays normally -- animation is decoration,
   never a visibility gate. (This site has twice hit real bugs where
   JS-gated visibility left whole sections permanently blank -- this
   pattern exists specifically to never repeat that.)
*/
.scroll-reveal {
  opacity: 1;
  transform: none;
}

.js .scroll-reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(10px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.js .scroll-reveal.in-view {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* staggered children within a reveal group */
.js .scroll-reveal-group.in-view > * {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* respect users who've asked for reduced motion -- show instantly, no animation */
@media (prefers-reduced-motion: reduce) {
  .js .scroll-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* modern hover polish -- safe, CSS-only, no JS dependency at all */
.master-icon-box,
.si-card,
.si-teaser-card,
.home-track-card,
.blog-index-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.master-icon-box:hover,
.blog-index-card:hover {
  transform: translateY(-4px);
}
.master-button,
.silvertech-button,
a.master-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.master-button:hover,
.silvertech-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(51, 119, 255, 0.25);
}

/* ---- Hero ---- */
.hero-futuristic {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #000000 0%, #0d0f14 55%, #000000 100%);
  padding: 110px 20px 90px;
  text-align: center;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
}
.hero-glow-1 {
  width: 480px; height: 480px;
  background: var(--brand-purple, #7B3FE4);
  top: -180px; right: -120px;
  animation: drift-glow-1 18s ease-in-out infinite;
}
.hero-glow-2 {
  width: 420px; height: 420px;
  background: var(--brand-magenta, #C13FBD);
  bottom: -200px; left: -100px;
  animation: drift-glow-2 22s ease-in-out infinite;
}
@keyframes drift-glow-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.08); }
  66% { transform: translate(20px, 60px) scale(0.95); }
}
@keyframes drift-glow-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(50px, -30px) scale(1.1); }
  70% { transform: translate(-30px, -50px) scale(0.92); }
}
.hero-network {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.35;
  pointer-events: none;
}
.hero-network .network-lines line {
  stroke: #6e83c9;
  stroke-width: 1;
}
.hero-network .network-lines line.data-flow {
  stroke: #9bb4ff;
  stroke-width: 1.6;
  stroke-dasharray: 4 14;
  animation: data-flow 3.5s linear infinite;
}
.hero-network .network-lines line.data-flow:nth-child(2) { animation-delay: -1.1s; }
.hero-network .network-lines line.data-flow:nth-child(4) { animation-delay: -2.3s; }
.hero-network .network-lines line.data-flow:nth-child(6) { animation-delay: -0.6s; }
.hero-network .network-lines line.data-flow:nth-child(9) { animation-delay: -1.8s; }
@keyframes data-flow {
  to { stroke-dashoffset: -180; }
}
.hero-network .network-nodes circle {
  fill: #9bb4ff;
  animation: node-pulse 3.2s ease-in-out infinite;
}
.hero-network .network-nodes circle:nth-child(2) { animation-delay: 0.4s; }
.hero-network .network-nodes circle:nth-child(3) { animation-delay: 0.8s; }
.hero-network .network-nodes circle:nth-child(4) { animation-delay: 1.2s; }
.hero-network .network-nodes circle:nth-child(5) { animation-delay: 1.6s; }
.hero-network .network-nodes circle:nth-child(6) { animation-delay: 2.0s; }
.hero-network .network-nodes circle:nth-child(7) { animation-delay: 0.6s; }
.hero-network .network-nodes circle:nth-child(8) { animation-delay: 1.4s; }
.hero-network .network-nodes circle:nth-child(9) { animation-delay: 2.2s; }
@keyframes node-pulse {
  0%, 100% { opacity: 0.5; r: 4; }
  50% { opacity: 1; r: 7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow-1, .hero-glow-2 { animation: none; }
  .hero-network .network-lines line.data-flow { animation: none; stroke-dasharray: none; }
}

.hero-futuristic-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9c6ff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 7px 18px;
  border-radius: 20px;
  margin-bottom: 26px;
}

/* ---- Hero text entrance animation ----
   The eyebrow, headline (word by word), subtitle and CTA row cascade in on
   page load. Words are wrapped by reveal.js at runtime. Everything here is
   scoped to .js, so if JavaScript is off or the script fails, the hero text
   renders fully visible and unanimated rather than being stuck invisible. ---- */
.js .hero-anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(12px);
  animation: heroWordIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroWordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.js .hero-anim-fade {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-anim-word,
  .js .hero-anim-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.hero-futuristic-title {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin: 0 0 22px;
}
.hero-futuristic-sub {
  font-size: 18px;
  line-height: 1.6;
  color: #c3cde8;
  max-width: 620px;
  margin: 0 auto 36px;
}
.hero-futuristic-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-blue, #3E63DD), var(--brand-purple, #7B3FE4));
  color: #fff;
  padding: 15px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(51,119,255,0.35); }
.hero-btn-secondary {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 15px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.hero-btn-secondary-dark {
  display: inline-block;
  background: transparent;
  color: var(--brand-navy, #2b354f);
  border: 1px solid #cdd6e8;
  padding: 15px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-btn-secondary-dark:hover { background: #f1f5fd; transform: translateY(-2px); }

@media (max-width: 700px) {
  .hero-futuristic-title { font-size: 34px; }
  .hero-futuristic-sub { font-size: 16px; }
}


/* ---- Compact futuristic hero (used on About Us and similar narrative pages) ---- */
.hero-futuristic-compact {
  padding: 90px 20px 70px;
}
.hero-futuristic-compact .hero-futuristic-sub {
  margin-bottom: 28px;
}
.breadcrumbs-dark .breadcrumbs-inner {
  display: flex;
  justify-content: center;
}
.breadcrumbs-dark .breadcrumb-trail {
  font-size: 14px;
  color: #9ca9c4;
}
.breadcrumbs-dark .breadcrumb-trail a {
  color: #c3cde8;
  text-decoration: none;
}
.breadcrumbs-dark .breadcrumb-trail a:hover {
  color: #fff;
}
.breadcrumbs-dark .breadcrumb-trail a:after {
  content: '/';
  margin: 0 8px;
  color: #5a6b8c;
}

/* ============================================================
   Sticky header -- stays visible while scrolling, site-wide.
   ============================================================
   Overrides the theme's original behavior (absolute-positioned
   overlay that scrolls away on most pages, normal static flow
   on blog posts). Now fixed everywhere with a solid background,
   with matching top-padding added to whichever hero type starts
   the page so nothing is hidden underneath it.
*/
#site-header-wrap {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(30, 34, 40, 0.08);
}

#featured-title,
.hero-futuristic {
  padding-top: 135px;
}

/* ---- Tighten excessive whitespace from the original theme's spacer
   widgets. These were tuned for a header that pushed content down via
   absolute overlay; with our own explicit header-clearance padding
   now in place, the original spacer heights compound into visibly
   excessive gaps. Cap them site-wide rather than hunt every instance. ---- */
.elementor-spacer-inner {
  max-height: 24px !important;
}
/* Fully empty Elementor sections (leftover artifacts with no real
   content) should not reserve any vertical space. */
.elementor-widget-wrap:empty {
  display: none;
}

/* ============================================================
   Full dark theme for pages with the futuristic hero.
   Scoped via :has() so the other 127 (not-yet-redesigned) pages
   keep their original light theme untouched.
   ============================================================ */
body:has(.hero-futuristic) #page,
body:has(.hero-futuristic) #main-content,
body:has(.hero-futuristic) #site-content,
body:has(.hero-futuristic) #content-wrap {
  background: #000 !important;
}
body:has(.hero-futuristic) .master-heading .main-heading,
body:has(.hero-futuristic) .master-heading h2,
body:has(.hero-futuristic) .master-heading h3,
body:has(.hero-futuristic) .elementor-heading-title,
body:has(.hero-futuristic) .headline-2 {
  color: #fff !important;
}
/* ---- Base heading color fix: the theme's own typography reset sets
   h1-h6 { color: #47536b } (dark slate, for the original light theme)
   with no page-specific override, so any bare heading tag not already
   covered above -- e.g. subheadings inside a plain text-editor block,
   the most common shape for blog-post body content -- renders in a
   near-invisible dark color on the black background. This affects the
   large majority of templates, not just blog posts. ---- */
body:has(.hero-futuristic) h1,
body:has(.hero-futuristic) h2,
body:has(.hero-futuristic) h3,
body:has(.hero-futuristic) h4,
body:has(.hero-futuristic) h5,
body:has(.hero-futuristic) h6 {
  color: #fff !important;
}
body:has(.hero-futuristic) .master-heading .sub-heading,
body:has(.hero-futuristic) .master-heading .pre-heading,
body:has(.hero-futuristic) .desc {
  color: #a3adc2 !important;
}
body:has(.hero-futuristic) p,
body:has(.hero-futuristic) .elementor-widget-text-editor {
  color: #a3adc2;
}
body:has(.hero-futuristic) .elementor-widget-container {
  background-color: transparent !important;
}
body:has(.hero-futuristic) .elementor-widget-wrap {
  background-color: transparent !important;
}
body:has(.hero-futuristic) .elementor-icon-box-title,
body:has(.hero-futuristic) .elementor-icon-box-title span {
  color: #fff !important;
}
body:has(.hero-futuristic) .elementor-icon-box-description {
  color: #a3adc2 !important;
}
/* The original theme hardcodes #000000 text color per-page-ID across
   thousands of individual rules (headings, accordion titles, etc.) --
   far too scattered to override one at a time. Target the actual
   rendered text elements directly instead. */
body:has(.hero-futuristic) .elementor-heading-title,
body:has(.hero-futuristic) .e-n-accordion-item-title-text,
body:has(.hero-futuristic) .master-icon-box .headline-2,
body:has(.hero-futuristic) .master-link {
  color: #fff !important;
}
body:has(.hero-futuristic) .e-n-accordion-item-description,
body:has(.hero-futuristic) .e-n-accordion-item-description * {
  color: #a3adc2 !important;
}
/* Image widgets that still carry a light/white background baked into the
   source image itself (illustrations, screenshots) get an intentional
   card frame instead of clashing with the black page. The generated dark
   illustrations are exempt -- they get the dark-glass frame further below. */
body:has(.hero-futuristic) .elementor-widget-image .elementor-widget-container:not(:has(img[src*="/static/img/generated/"])) {
  background: #fff !important;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
body:has(.hero-futuristic) section.elementor-section,
body:has(.hero-futuristic) .e-con.e-parent {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================================
   Modern card treatment for the legacy icon-box widget, site-wide.
   Every page already gets the dark theme (rule above); this is the
   next layer -- it elevates the un-redesigned pages' icon-box grids
   (country pages, industries, services) to match the card language
   used on the fully-rebuilt pages (si-card, why-card, home-track-card),
   without touching their markup. !important is used deliberately: the
   legacy theme's own icon-box variants (icon-has-bg, hover-effect-style-1,
   accent, etc.) carry their own !important rules, so matching their
   specificity rule-by-rule isn't practical -- this decisively overrides
   all of them with one consistent look instead.
   ============================================================ */
body:has(.hero-futuristic) .master-icon-box {
  background: #0e1015 !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 30px 26px !important;
}
body:has(.hero-futuristic) .master-icon-box .master-icon {
  width: 52px !important;
  height: 52px !important;
  line-height: 52px !important;
  border-radius: 12px !important;
  background: rgba(51,119,255,0.14) !important;
  border: 1px solid rgba(111,140,255,0.3);
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 22px;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
body:has(.hero-futuristic) .master-icon-box .master-icon svg {
  width: 24px;
  height: 24px;
}
body:has(.hero-futuristic) .master-icon-box .master-icon i {
  color: #8fb0ff !important;
}
body:has(.hero-futuristic) .master-icon-box:hover .master-icon {
  box-shadow: 0 0 20px rgba(51,119,255,0.35);
}
body:has(.hero-futuristic) .master-icon-box .desc {
  font-size: 14px;
  line-height: 1.65;
}
body:has(.hero-futuristic) .icon-position-left .master-icon-box,
body:has(.hero-futuristic) .icon-position-right .master-icon-box {
  align-items: flex-start;
  gap: 16px;
}

/* ---- Native <details> FAQ accordion (used on industry pages, some blog
   posts, etc.) -- gives it the same dark-card treatment as everything
   else, and fixes the +/- icon swap with real CSS: the site ships no
   accordion JS, so the icon previously never toggled. ---- */
body:has(.hero-futuristic) details.e-n-accordion-item {
  background: #0e1015;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
body:has(.hero-futuristic) details.e-n-accordion-item summary.e-n-accordion-item-title {
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body:has(.hero-futuristic) details.e-n-accordion-item summary::-webkit-details-marker {
  display: none;
}
body:has(.hero-futuristic) details.e-n-accordion-item > div {
  padding: 0 22px 20px;
}
body:has(.hero-futuristic) details.e-n-accordion-item .e-n-accordion-item-title-icon svg {
  fill: #8fb0ff;
  width: 16px;
  height: 16px;
}
body:has(.hero-futuristic) details.e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon .e-opened,
body:has(.hero-futuristic) details.e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed {
  display: none !important;
}
body:has(.hero-futuristic) details.e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened,
body:has(.hero-futuristic) details.e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon .e-closed {
  display: flex !important;
}

/* ---- Fancy-image widget (zigzag row images on industry/legacy pages) --
   plain width:100% by default; add the same rounded-corner/shadow polish
   the rebuilt pages use elsewhere. ---- */
body:has(.hero-futuristic) .master-fancy-image img {
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* ---- Blog sidebar (search, recent posts) -- these widgets were never
   restyled for the dark theme: the background goes dark via #content-wrap
   above, but the text (widget titles, post titles, dates) kept its
   original dark-on-light color, making it very hard to read on black.
   .widget_banner (the photo-backed "Contact Us" box) already has its own
   white-on-photo styling and is excluded so it isn't double-boxed. ---- */
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) {
  background: #0e1015;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 26px;
}
body:has(.hero-futuristic) #sidebar .widget-title,
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) h1,
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) h2,
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) h3,
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) h4 {
  color: #fff !important;
}
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) p,
body:has(.hero-futuristic) #sidebar .post-date {
  color: #8a93a3 !important;
}
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) a {
  color: #e4e8f0;
}
body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) a:hover {
  color: #8fb0ff;
}
body:has(.hero-futuristic) #sidebar input[type="search"],
body:has(.hero-futuristic) #sidebar input[type="text"] {
  background: #000;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  border-radius: 6px;
}
body:has(.hero-futuristic) #sidebar .wp-block-search__button {
  background: var(--brand-blue, #3E63DD);
  color: #fff;
  border: none;
  border-radius: 6px;
}

/* ---- Content lists & blockquotes inside plain article/text-editor
   body copy (blog posts) -- ul loses its marker sitewide (list-style:
   none, for the nav/icon-list use cases) with no replacement for plain
   prose bullet lists, and blockquote still carries its original
   light-theme card (off-white background, dark text). ---- */
body:has(.hero-futuristic) .elementor-widget-text-editor ul li,
body:has(.hero-futuristic) .textwidget ul li {
  position: relative;
  padding-left: 20px;
}
body:has(.hero-futuristic) .elementor-widget-text-editor ul li:before,
body:has(.hero-futuristic) .textwidget ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand-blue, #3E63DD);
}
body:has(.hero-futuristic) blockquote {
  background: #0e1015 !important;
  color: #c3cde8 !important;
  border-left: 3px solid var(--brand-blue, #3E63DD);
}

/* ---- Reusable FAQ section (country pages, and anywhere else needed) ---- */
.page-faq-section { padding: 70px 20px 90px; background: #000; }
.page-faq-intro { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.page-faq-intro h2 { font-size: 28px; color: #fff; margin: 0; font-weight: 700; }
.page-faq-list { max-width: 760px; margin: 0 auto; }
.page-faq-item {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 4px 22px;
  margin-bottom: 14px;
  background: #0e1015;
}
.page-faq-item summary {
  padding: 18px 0;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.page-faq-item summary::-webkit-details-marker { display: none; }
.page-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 20px;
  color: #8fb0ff;
  font-weight: 400;
}
.page-faq-item[open] summary::after { content: '\2212'; }
.page-faq-answer { padding: 0 0 20px; color: #a3adc2; font-size: 14.5px; line-height: 1.7; }
.page-faq-answer a { color: #8fb0ff; font-weight: 600; }

/* ============================================================
   HEADER -- black bar, white text, logo colors as accents.
   The theme's own floating "pill" container defaults to a white
   background (built for a light header); overridden black here.
   ============================================================ */
#site-header .silvertech-container {
  background-color: #000 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
#site-logo-inner { max-width: 190px; }
#site-logo-inner img { width: 100%; height: auto; display: block; }
@media (max-width: 991px) { #site-logo-inner { max-width: 160px; } }

/* nav link text: white, with a brand-blue underline sweep on hover/active */
#main-nav > ul > li > a > span { color: #fff !important; }
#main-nav > ul > li > a > span:before { background-color: var(--brand-blue, #3E63DD) !important; }

/* mega-menu dropdown panels stay light/readable regardless of the black bar above them */
#main-nav .sub-menu.mega-menu .mega-menu-heading { color: var(--brand-purple, #7B3FE4) !important; }

/* ---- push Login + Register to the right edge of the bar ----
   The nav list is float-based, not flex, by default; switched to flex
   here specifically so margin-left:auto can push the trailing group
   right without disturbing how the mega-menu dropdowns anchor to their
   own <li> (position:absolute still anchors the same way on a flex child). */
#main-nav > ul#menu-top-menu {
  display: flex;
  align-items: center;
  float: none;
}
#main-nav > ul#menu-top-menu > li { float: none; }
#main-nav > ul#menu-top-menu > li.nav-right-group { margin-left: auto; }

/* Login: a real button, not a text link. The parent <a> uses
   line-height-based centering (line-height:100px) that only works for
   plain inline text; switched to flex centering here since the button
   span has its own padding/border box that line-height can't center. */
#main-nav > ul#menu-top-menu > li.nav-right-group > a {
  display: flex !important;
  align-items: center;
  line-height: normal !important;
  height: 100px;
}
.nav-login-btn span {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  font-weight: 600;
}
.nav-login-btn span:before { display: none; }
.nav-login-btn:hover span { border-color: #fff !important; background: rgba(255,255,255,0.08) !important; }

/* Register: brand-gradient pill (was previously styled only in the
   light-theme layer, which is no longer loaded). Same flex-centering
   fix as Login, for the same reason -- an inline-block pill with its
   own padding doesn't reliably centre under line-height alone. */
#main-nav > ul > li:has(> a > span.nav-register) > a {
  display: flex !important;
  align-items: center;
  line-height: normal !important;
  height: 100px;
}
#main-nav > ul > li > a > span.nav-register {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-blue, #3E63DD), var(--brand-purple, #7B3FE4)) !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
}
#main-nav > ul > li > a > span.nav-register:before { display: none; }

@media (max-width: 1200px) {
  #main-nav { margin-right: 20px; }
}

/* ============================================================
   MOBILE MENU (off-canvas panel) -- black, to match the header bar.
   Ported from an earlier light-theme-only pass and adapted to black;
   without this the panel had no background, no close-button styling,
   invisible expand arrows, and unstyled CTA buttons at the bottom.
   ============================================================ */
.mobile-button:before, .mobile-button:after, .mobile-button span { background-color: #fff !important; }
.mobi-overlay { background: rgba(0,0,0,0.65) !important; z-index: 999997; }
@supports (backdrop-filter: blur(2px)) { .mobi-overlay { backdrop-filter: blur(3px); } }

#main-nav-mobi {
  background: #000 !important;
  width: 300px;
  max-width: calc(100% - 56px);
  padding-bottom: 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#main-nav-mobi ul li { border-top: 1px solid rgba(255,255,255,0.08); }
#main-nav-mobi ul li a {
  color: #fff !important;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  padding: 14px 56px 14px 22px;
}
#main-nav-mobi ul > li > a:hover { opacity: 1; color: var(--brand-blue, #3E63DD) !important; }
#main-nav-mobi > ul > li li a { font-size: 14.5px; font-weight: 500; color: #a3adc2 !important; padding: 11px 22px 11px 34px; }
#main-nav-mobi ul ul { background: #0e1015 !important; }
#main-nav-mobi .current-menu-item > a { color: var(--brand-blue, #3E63DD) !important; }

/* logo row at the top of the panel, with the close button */
#main-nav-mobi > ul > li.menu-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 14px 14px 22px;
  position: sticky;
  top: 0;
  background: #000 !important;
  z-index: 2;
}
#main-nav-mobi .menu-logo-inner { margin: 0; }
#main-nav-mobi .menu-logo-inner a { padding: 0; }
#main-nav-mobi .menu-logo-inner img { width: 150px; height: auto; display: block; }
.mobi-close {
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  flex: none;
}
.mobi-close:hover { background: rgba(255,255,255,0.16) !important; }

/* expand/collapse arrows: CSS chevron instead of the icon font that was never bundled */
#main-nav-mobi .menu-item-has-children .arrow {
  font-family: inherit;
  width: 50px; height: 50px;
  top: 0; right: 2px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
#main-nav-mobi .menu-item-has-children .arrow:before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid #a3adc2;
  border-bottom: 2px solid #a3adc2;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease;
}
#main-nav-mobi .menu-item-has-children .arrow.active:before { transform: translateY(2px) rotate(-135deg); border-color: var(--brand-blue, #3E63DD) !important; }

/* mega-menu group labels inside the panel -- alternating blue/purple so
   the logo's purple gets real visual weight here too, not just blue */
#main-nav-mobi .mega-menu-heading {
  padding: 16px 22px 6px 34px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-blue, #3E63DD) !important;
  border-top: 0;
}
#main-nav-mobi .mega-menu-heading.mega-menu-col2,
#main-nav-mobi .mega-menu-heading.mega-menu-col4 { color: var(--brand-purple, #7B3FE4) !important; }
#main-nav-mobi .mega-menu-heading em { display: block; font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #8a93a3 !important; margin-top: 2px; }

/* Register duplicates the "Get Started" CTA at the bottom of the panel;
   Login stays, since it serves a different purpose (existing customers). */
#main-nav-mobi .menu-item-12398 { display: none; }

/* call-to-action block at the bottom of the panel */
#main-nav-mobi > ul > li.mobi-cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#main-nav-mobi .mobi-cta a.mobi-cta-primary,
#main-nav-mobi .mobi-cta a.mobi-cta-secondary {
  display: block; text-align: center;
  padding: 13px 16px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
}
#main-nav-mobi .mobi-cta a.mobi-cta-primary { background: linear-gradient(135deg, var(--brand-blue, #3E63DD), var(--brand-purple, #7B3FE4)) !important; color: #fff !important; }
#main-nav-mobi .mobi-cta a.mobi-cta-secondary { border: 1px solid rgba(255,255,255,0.25); color: #fff !important; }

/* Critical: .mobi-nav-extra (logo row + CTA buttons) and its contents are
   meant to be moved into #main-nav-mobi by vendor.js's mobile-menu setup.
   If that hasn't happened yet, or on a viewport where the theme's own JS
   doesn't trigger, this markup must never render in its original position
   inside the desktop header -- it would show as a second logo/nav
   overlapping the real one. Style.css already has a plain (non-important)
   display:none for this, but that's not reliably enough to survive the
   JS's own class/attribute changes; !important makes it unconditional. */
#main-nav .menu-logo, #main-nav .mobi-cta, .mobi-nav-extra { display: none !important; }

/* ==========================================================================
   FOOTER -- smsala-style: CTA band / brand + 4 link columns / bottom bar.
   This entire block previously existed ONLY in the light-theme override
   layer that's no longer loaded -- ported here and confirmed it already
   used near-black colors (#15122C / #100E22), so no theme adaptation was
   actually needed, just restoring it to a file that's still loaded.
   `#footer.cs-footer` beats the legacy `#footer { padding: 60px 0 !important }`.
   ========================================================================== */
#footer.cs-footer { background: #15122C !important; color: #B9C3E0; padding: 0 !important; border: 0; }
#footer.cs-footer a { color: #B9C3E0; text-decoration: none; transition: color 0.2s ease; }
#footer.cs-footer a:hover { color: #FFFFFF; }

/* tier 1: CTA band -- hidden on pages that already end with their own call to action */
#footer .cs-footer-cta { background: var(--band) !important; padding: 54px 20px 28px; }
body:has(.final-cta-section, .services-final-cta, .si-cta, .contact-form-card, .confirm-section) #footer .cs-footer-cta { display: none; }
#footer .cs-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
#footer .cs-footer-cta-text h2 { color: #FFFFFF !important; font-size: 28px; line-height: 1.25; margin: 0 0 8px; }
#footer .cs-footer-cta-text p { color: rgba(255,255,255,0.86) !important; margin: 0; max-width: 560px; font-size: 15.5px; line-height: 1.6; }
#footer .cs-footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#footer .cs-btn { display: inline-block; padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 1.2; }
#footer .cs-btn-primary { color: var(--brand-blue) !important; background: #fff !important; }
#footer .cs-btn-ghost { color: #fff !important; border: 1px solid rgba(255,255,255,0.5); }
#footer .cs-footer-chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
#footer .cs-footer-chips li { background: rgba(255,255,255,0.14); color: #FFFFFF; font-size: 13px; padding: 7px 14px; border-radius: 20px; }
#footer .cs-footer-chips strong { font-weight: 700; }

/* tier 2: brand column + link columns */
#footer .cs-footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(120px, 1fr));
  gap: 40px;
  padding-top: 64px; padding-bottom: 44px;
}
#footer .cs-footer-logo img { width: 230px; height: auto; display: block; }
#footer .cs-footer-about { color: #A9B2CF; font-size: 14px; line-height: 1.7; margin: 18px 0 20px; max-width: 360px; }
#footer .cs-footer-social { display: flex; gap: 10px; }
#footer .cs-footer-social a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: #FFFFFF !important; font-size: 16px; }
#footer .cs-footer-social a:hover { background: var(--brand-blue); }
#footer .cs-footer-col h3 { color: #FFFFFF !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0 18px; }
#footer .cs-footer-col ul { list-style: none; margin: 0; padding: 0; }
#footer .cs-footer-col li { margin-bottom: 11px; font-size: 14.5px; line-height: 1.4; }

/* tier 3: bottom bar */
#footer .cs-footer-bottom { background: #100E22 !important; padding: 18px 0; }
#footer .cs-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#footer .cs-footer-bottom p { margin: 0; font-size: 13px; color: #8990AD; }
#footer .cs-footer-bottom nav { display: flex; gap: 22px; }
#footer .cs-footer-bottom nav a { font-size: 13px; color: #8990AD; }

@media (max-width: 1024px) {
  #footer .cs-footer-main { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
  #footer .cs-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #footer .cs-footer-cta { padding: 44px 20px 24px; }
  #footer .cs-footer-cta-text h2 { font-size: 23px; }
  #footer .cs-footer-cta-actions, #footer .cs-btn { width: 100%; text-align: center; }
  #footer .cs-footer-main { grid-template-columns: 1fr 1fr; padding-top: 48px; }
  #footer .cs-footer-logo img { width: 200px; }
  #footer .cs-footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   MOBILE SIDEBAR (blog posts) -- purely structural, not theme-color-related,
   but this also lived only in the removed light-theme layer. Without it,
   `#sidebar { display: none }` in the legacy stylesheet hides Search /
   Recent Posts / the contact banner entirely below 991px, on all 30 blog
   posts -- restored here with the one color reference adapted to black.
   ========================================================================== */
@media only screen and (max-width: 991px) {
  body:has(.hero-futuristic) #sidebar {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-top: 8px;
  }
  body:has(.hero-futuristic) #inner-sidebar {
    padding: 28px 20px 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  body:has(.hero-futuristic) #sidebar .widget { margin-bottom: 0; }
  body:has(.hero-futuristic) #sidebar .widget-title { font-size: 15px; margin: 0 0 14px; }
  body:has(.hero-futuristic) #sidebar .widget:not(.widget_banner) { padding: 20px; }

  /* Search: full-width field with the button docked inside it, not stacked below */
  body:has(.hero-futuristic) #sidebar .wp-block-search__inside-wrapper { display: flex; }
  body:has(.hero-futuristic) #sidebar input.wp-block-search__input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 14.5px; }
  body:has(.hero-futuristic) #sidebar .wp-block-search__button { padding: 0 18px; font-size: 14px; }

  /* Recent Posts: slightly smaller thumbnails so title + date always have room to breathe */
  body:has(.hero-futuristic) .widget_recent_posts .recent-news li { padding-bottom: 14px !important; margin-bottom: 14px !important; }
  body:has(.hero-futuristic) .widget_recent_posts .recent-news li:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  body:has(.hero-futuristic) .widget_recent_posts .recent-news .thumb { width: 64px !important; height: 64px !important; margin-right: 14px !important; }
  body:has(.hero-futuristic) .widget_recent_posts .recent-news h3 { font-size: 14.5px; line-height: 1.35; margin: 0 0 4px; }
  body:has(.hero-futuristic) .widget_recent_posts .recent-news .post-date { font-size: 12.5px; }

  /* Contact banner: the desktop 144px top/bottom padding was sized for a wide column */
  body:has(.hero-futuristic) #sidebar .widget_banner { padding: 40px 24px; border-radius: 12px; }
  body:has(.hero-futuristic) #sidebar .widget_banner h2 { font-size: 17px; }
  body:has(.hero-futuristic) #sidebar .widget_banner h3 { font-size: 13.5px; }
}

/* ==========================================================================
   CLOSING CTA BANDS (homepage, services/industries/about/careers/USA, system
   integration) -- the brand gradient band, not just plain black, at these
   high-visibility conversion points. Also only existed in the removed layer.
   ========================================================================== */
.final-cta-section, .services-final-cta { background: var(--band) !important; }
/* the wave animation has a black background: `screen` blending drops the black and keeps the light waves */
.final-cta-bg img { mix-blend-mode: screen; opacity: 0.7; }
.final-cta-bg:after { background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(20,17,60,0.28) 0%, rgba(20,17,60,0) 75%); }
.si-cta { background: var(--band) !important; border: 0 !important; }
html body .final-cta-section h2, html body .services-final-cta h2, html body .si-cta h2 { color: #FFFFFF !important; }
html body .final-cta-section p, html body .services-final-cta p, html body .si-cta p { color: rgba(255,255,255,0.88) !important; }
html body .services-final-cta p a { color: #FFFFFF; text-decoration: underline; }

/* Buttons sitting on the bright blue-purple band (CTA sections + footer CTA)
   need to invert to white-with-colored-text -- their normal blue-gradient
   style would otherwise blend into the same-toned background behind them.
   The hero is deliberately excluded: it uses a dark (not bright-band)
   background, where the normal gradient button already has full contrast. */
.final-cta-section .hero-btn-primary, .services-final-cta .hero-btn-primary,
.si-cta .silvertech-button, .cs-footer-cta .cs-btn-primary {
  background: #FFFFFF !important; color: var(--brand-blue, #3E63DD) !important;
}
.final-cta-section .hero-btn-secondary, .services-final-cta .hero-btn-secondary,
.cs-footer-cta .cs-btn-ghost {
  background: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.55) !important;
}
.final-cta-section .hero-btn-secondary:hover, .services-final-cta .hero-btn-secondary:hover,
.cs-footer-cta .cs-btn-ghost:hover { background: rgba(255,255,255,0.12) !important; }

/* ============================================================
   TEXT ACCENT -- a gradient-colored keyword within a headline
   (hero titles, section H2s), for the aetelco-style "highlight the
   key word" treatment. Falls back to solid brand blue on browsers
   without background-clip:text support (still on-brand, just not
   gradient), rather than invisible or default-colored text.
   ============================================================ */
.text-accent {
  color: var(--brand-blue, #3E63DD); /* fallback */
  background: linear-gradient(135deg, var(--brand-blue, #3E63DD), var(--brand-purple, #7B3FE4), var(--brand-magenta, #C13FBD));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* on a hero (dark, glowing background) the gradient needs to run lighter to stay legible */
.hero-futuristic .text-accent,
.final-cta-section .text-accent,
.services-final-cta .text-accent {
  background: linear-gradient(135deg, #8FA8FF, #B794F6, #E88FE0);
  -webkit-background-clip: text;
  background-clip: text;
}


/* ==========================================================================
   MOTION LAYER (static/js/motion.js + motion-home.js)
   Motion canvases sit at z-index:-1 inside an isolated stacking context, so
   they always paint above the section's own background but below every piece
   of content -- including plain, non-positioned children like the h2/p/a
   inside .si-cta. Without JS or WebGL none of these classes are ever added
   and the original CSS glows / band gradients remain exactly as before.
   ========================================================================== */
.has-aurora { isolation: isolate; position: relative; overflow: hidden; }
/* ^ position + overflow are essential, not cosmetic: without them the canvas's
   inset:0 anchors to the nearest positioned ANCESTOR (the whole page wrapper on
   inner pages) and, because isolation paints after in-flow content, a page-sized
   canvas would cover everything. Every host must contain and clip its own canvas. */
.motion-aurora, .motion-matrix {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
}
.motion-aurora { animation: motionFadeIn 1.6s ease-out both; }
@keyframes motionFadeIn { from { opacity: 0; } to { opacity: 1; } }
.has-aurora > .hero-glow, .has-aurora > .hero-network, .has-aurora > .final-cta-bg { display: none !important; }
.hero-futuristic.has-aurora { background: #030409 !important; }
.final-cta-section.has-aurora, .services-final-cta.has-aurora, .si-cta.has-aurora { background: #05060c !important; }

/* fine dot matrix over inner-page heroes -- a quiet "precision grid" texture */
.motion-matrix {
  background-image: radial-gradient(rgba(190, 200, 255, 0.16) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 20%, transparent 78%);
  animation: matrixDrift 24s linear infinite;
}
@keyframes matrixDrift { to { background-position: 22px 44px; } }

/* shared canvas sizing for the homepage scenes */
.motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-motion] { position: relative; }
.motion-live > img.vm-media-el { display: none; }

@media (prefers-reduced-motion: reduce) {
  .motion-aurora, .motion-matrix { animation: none; }
}

/* Legacy WordPress image frames: a 30px WHITE bezel around illustrations on
   the country pages -- a leftover from the original light design. Re-skinned
   as a thin dark-glass frame, scoped (via :has) to containers that hold one of
   the generated illustrations, so no other image on the site is affected.
   Browsers without :has support simply keep the old frame. */
.elementor-widget-container:has(> img[src*="/static/img/generated/"]),
.elementor-widget-container:has(> a > img[src*="/static/img/generated/"]) {
  background: linear-gradient(160deg, rgba(123,63,228,0.10), rgba(62,99,221,0.04)) !important;
  padding: 8px !important;
  border: 1px solid rgba(160,150,255,0.18) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px -30px rgba(123,63,228,0.45) !important;
}
.elementor-widget-container:has(> img[src*="/static/img/generated/"]) > img,
.elementor-widget-container:has(> a > img[src*="/static/img/generated/"]) img { border-radius: 16px; }

/* ==========================================================================
   EXPERIENCE LAYER (static/js/experience.js)
   ========================================================================== */
/* Lenis: native smooth-scroll must be off or the two fight each other */
html.has-lenis, html.has-lenis body { height: auto; scroll-behavior: auto !important; }
.has-lenis .lenis-stopped { overflow: hidden; }

/* headings: words rise out of masks ------------------------------------ */
.xw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.xw-i { display: inline-block; will-change: transform; transform-origin: 0 100%; }

/* cursor spotlight on cards -------------------------------------------- */
.has-spot { isolation: isolate; }
.has-spot > .spot {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 63, 228, 0.24), rgba(62, 99, 221, 0.08) 35%, transparent 60%);
}
.has-spot:hover > .spot { opacity: 1; }

/* background videos ----------------------------------------------------- */
video[data-autoplay] { display: block; width: 100%; height: 100%; object-fit: cover; }


/* The legacy theme sets body { overflow-x:hidden; overflow-y:hidden } (a page-loader
   leftover). overflow:hidden turns <body> into a scroll container, which silently
   disables position:sticky for EVERYTHING on the site. overflow-x:clip still stops
   sideways scrolling but is not a scroll container, so sticky works again.
   `html body` out-specifies the legacy rule regardless of stylesheet order. */
html body { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }


/* ==========================================================================
   HEADER v3 -- full-width black bar, bigger logo, nav centred, account
   buttons pinned right, soft gradient hairline underneath
   ========================================================================== */
/* The outer fixed strip was WHITE and full-width while only the inner bar was
   black (max-width 90%), which showed as white blocks at both sides -- wider
   the screen, bigger the blocks. The strip itself is now the black bar. */
#site-header-wrap { background: #000 !important; }
#site-header-wrap::after {                     /* soft gradient hairline */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(123,63,228,0.45) 22%, rgba(62,99,221,0.5) 50%, rgba(193,63,189,0.42) 78%, rgba(255,255,255,0) 100%);
}
#site-header-wrap::before {                    /* gentle shade so content slides under cleanly */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
}
@media (min-width: 992px) {
  #site-header .silvertech-container { display: block !important; width: 92%; max-width: 1340px !important; }
  /* logo + menu live inside .site-header-inner (a class, not an id): THIS is the row */
  #site-header .site-header-inner { display: flex !important; align-items: center; width: 100% !important; float: none !important; }
  #site-header .site-header-inner > .wrap-inner { flex: 1 1 auto; width: 100% !important; display: flex !important; align-items: center; }
  #main-nav > ul#menu-top-menu > li { flex-shrink: 0; white-space: nowrap; }
  #site-logo { flex: 0 0 auto; width: auto !important; max-width: none !important; }   /* legacy width:100% would swallow the row */
  #site-logo-inner { max-width: 238px !important; }
  #main-nav { flex: 1 1 auto; float: none !important; margin: 0 0 0 32px !important; }   /* !important also beats legacy margin-right:100px at <=1280px */
  #main-nav > ul#menu-top-menu { width: 100%; justify-content: flex-start; }
  #main-nav > ul#menu-top-menu > li:first-child { margin-left: auto; }        /* centre the page links */
  #main-nav > ul#menu-top-menu > li.nav-right-group { margin-left: auto; }    /* account buttons hard right */
  #main-nav > ul#menu-top-menu > li.nav-right-group, #main-nav > ul#menu-top-menu > li.menu-item-12398 { padding-left: 6px !important; padding-right: 6px !important; }
}
@media (max-width: 991px) { #site-logo-inner { max-width: 178px !important; } }

/* Login: a real secondary button with an account icon, same height as Register */
.nav-login-btn span {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 11px 20px !important; border-radius: 11px !important; line-height: 1 !important;
  border: 1px solid rgba(255,255,255,0.22) !important; background: rgba(255,255,255,0.05) !important;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav-login-btn:hover span { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.45) !important; }
.nav-login-ico { flex: none; opacity: 0.9; }
#main-nav > ul > li > a > span.nav-register { padding: 12px 24px !important; border-radius: 11px !important; line-height: 1 !important; font-size: 15px; box-shadow: 0 8px 22px -8px rgba(123,63,228,0.7); }

/* ---- mobile menu: refined close button + expand toggles ---- */
.mobi-close {
  position: relative; width: 44px !important; height: 44px !important; padding: 0;
  font-size: 0 !important; color: transparent !important; border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.04) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease;
}
.mobi-close::before, .mobi-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.6px; border-radius: 2px; background: #fff;
}
.mobi-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobi-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mobi-close:hover, .mobi-close:focus-visible { transform: rotate(90deg); background: rgba(123,63,228,0.22) !important; border-color: rgba(160,140,255,0.45) !important; }

/* expand toggles: a round button with a plus that folds into a minus */
#main-nav-mobi .menu-item-has-children .arrow {
  width: 34px !important; height: 34px !important; top: 9px !important; right: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important; font-size: 0 !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#main-nav-mobi .menu-item-has-children .arrow::before, #main-nav-mobi .menu-item-has-children .arrow::after {
  content: "" !important; position: absolute; left: 50%; top: 50%; width: 12px !important; height: 1.6px !important;
  border: 0 !important; border-radius: 2px; background: #cfd6ea !important;
  transform: translate(-50%, -50%) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}
#main-nav-mobi .menu-item-has-children .arrow::after { transform: translate(-50%, -50%) rotate(90deg) !important; }
#main-nav-mobi .menu-item-has-children .arrow.active { transform: rotate(180deg); background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)) !important; border-color: transparent !important; }
#main-nav-mobi .menu-item-has-children .arrow.active::before { background: #fff !important; }
#main-nav-mobi .menu-item-has-children .arrow.active::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0) !important; }

/* ---- background videos never show player UI ---- */
video[data-autoplay] { pointer-events: none; }
video[data-autoplay]::-webkit-media-controls,
video[data-autoplay]::-webkit-media-controls-enclosure,
video[data-autoplay]::-webkit-media-controls-panel,
video[data-autoplay]::-webkit-media-controls-overlay-enclosure,
video[data-autoplay]::-webkit-media-controls-overlay-play-button,
video[data-autoplay]::-webkit-media-controls-start-playback-button {
  display: none !important; -webkit-appearance: none !important; appearance: none !important; opacity: 0 !important;
}

/* ==========================================================================
   SIGNATURE SCROLL MOMENTS (shared styles; each page uses a different one)
   ========================================================================== */
/* a) statement text */
.statement-section { padding: 130px 20px; background: #000; }
.statement-text { max-width: 1100px; margin: 0 auto; color: #fff; font-family: "DM Sans", sans-serif; font-weight: 600;
  font-size: clamp(28px, 3.9vw, 56px); line-height: 1.22; letter-spacing: -0.02em; text-align: left; }
.statement-text .xw { overflow: visible; }
.statement-kicker { max-width: 1100px; margin: 0 auto 26px; color: #8fb0ff; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

/* b) horizontal pillars */
.hs-section { position: relative; background: #000; overflow: hidden; }
.hs-head { padding: 110px 20px 40px; text-align: center; }
.hs-track { display: flex; gap: 28px; padding: 0 5vw 90px; width: max-content; will-change: transform; }
.hs-panel { position: relative; width: min(1040px, 82vw); height: min(620px, 74vh); border-radius: 28px; overflow: hidden; flex: none;
  border: 1px solid rgba(160,150,255,0.16); background: #07080f; display: grid; grid-template-columns: 1.05fr 1fr; isolation: isolate; }
.hs-media { position: absolute; inset: 0; z-index: -1; }
.hs-media video, .hs-media img { width: 100%; height: 100%; object-fit: cover; }
.hs-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,12,0.92) 0%, rgba(5,6,12,0.72) 45%, rgba(5,6,12,0.1) 100%); }
.hs-copy { padding: 54px 50px; display: flex; flex-direction: column; justify-content: center; }
.hs-num { color: rgba(255,255,255,0.35); font-size: 14px; font-weight: 700; letter-spacing: 0.2em; }
.hs-copy h3 { color: #fff; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; margin: 14px 0 16px; letter-spacing: -0.02em; }
.hs-copy p { color: #c3cbe0; font-size: 16px; line-height: 1.7; margin: 0 0 22px; max-width: 460px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hs-chips span { padding: 7px 13px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #e6e9f5; font-size: 13px; font-weight: 600; }
.hs-link { align-self: flex-start; color: #fff; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)); }
@media (max-width: 991px) {
  .hs-track { flex-direction: column; width: auto; padding: 0 20px 70px; }
  .hs-panel { width: 100%; height: auto; min-height: 520px; grid-template-columns: 1fr; }
  .hs-media::after { background: linear-gradient(180deg, rgba(5,6,12,0.55), rgba(5,6,12,0.92) 60%); }
  .hs-copy { padding: 40px 28px; justify-content: flex-end; }
}

/* c) stacking layers */
.stack-section { padding: 40px 20px 120px; background: #000; }
.stack-list { max-width: 980px; margin: 0 auto; }
.stack-card { position: sticky; top: 156px; margin-bottom: 26px; transform-origin: 50% 0;
  display: grid; grid-template-columns: 90px 1fr; gap: 28px; align-items: start; padding: 40px 42px; border-radius: 24px;
  background: linear-gradient(160deg, #11131d 0%, #090a10 100%); border: 1px solid rgba(160,150,255,0.18);
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.9); }
.stack-card:nth-child(2) { top: 178px; } .stack-card:nth-child(3) { top: 200px; } .stack-card:nth-child(4) { top: 222px; } .stack-card:nth-child(5) { top: 244px; }
.stack-index { font-size: 54px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #8fa8ff, #c9a2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stack-card h3 { color: #fff; font-size: 24px; margin: 0 0 10px; }
.stack-card p { color: #a3adc2; font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.stack-card .stack-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-card .stack-tags span { font-size: 12.5px; font-weight: 600; color: #cfd5ea; padding: 5px 11px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 700px) { .stack-card { grid-template-columns: 1fr; gap: 12px; padding: 30px 24px; top: 100px; } .stack-index { font-size: 40px; } }

/* d) process timeline */
.process-section { padding: 110px 20px; background: #000; }
.process-wrap { max-width: 900px; margin: 0 auto; position: relative; padding-left: 70px; }
.process-rail { position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.process-rail-fill { position: absolute; inset: 0; transform-origin: 50% 0; background: linear-gradient(180deg, var(--brand-blue), var(--brand-purple), var(--brand-magenta)); }
.process-step { position: relative; padding: 6px 0 58px; opacity: 0.35; transition: opacity 0.5s ease; }
.process-step::before { content: ""; position: absolute; left: -56px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #000; border: 2px solid rgba(255,255,255,0.25); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.process-step.is-active { opacity: 1; }
.process-step.is-active::before { border-color: transparent; background: linear-gradient(135deg, var(--brand-blue), var(--brand-magenta)); box-shadow: 0 0 0 6px rgba(123,63,228,0.18), 0 0 24px rgba(123,63,228,0.7); }
.process-step small { color: #8fb0ff; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.process-step h3 { color: #fff; font-size: 26px; margin: 8px 0 10px; }
.process-step p { color: #a3adc2; font-size: 15.5px; line-height: 1.75; margin: 0; max-width: 640px; }
html:not(.xp) .process-step { opacity: 1; }

/* e) sector switcher */
.sector-section { padding: 40px 20px 60px; background: #000; }
.sector-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.sector-stage { position: sticky; top: 150px; align-self: start; aspect-ratio: 4 / 3; height: auto; border-radius: 28px; overflow: hidden; border: 1px solid rgba(160,150,255,0.16); background: #07080f; }
.sector-visual { position: absolute; inset: 0; opacity: 0; }
.sector-visual:first-child { opacity: 1; }
.sector-visual img { width: 100%; height: 100%; object-fit: cover; }
.sector-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.3; transition: opacity 0.5s ease; }
.sector-item.is-active, html:not(.xp) .sector-item { opacity: 1; }
.sector-item small { color: #8fb0ff; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.sector-item h3 { color: #fff; font-size: clamp(28px, 2.8vw, 40px); margin: 10px 0 14px; letter-spacing: -0.02em; }
.sector-item > p { color: #b3bcd2; font-size: 16px; line-height: 1.7; margin: 0 0 20px; }
.sector-lanes { display: grid; gap: 10px; }
.sector-lane { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); }
.sector-lane b { color: #fff; font-size: 13px; }
.sector-lane span { color: #a3adc2; font-size: 14px; line-height: 1.55; }
.sector-item a { margin-top: 18px; color: #b9a6ff; font-weight: 700; text-decoration: none; }
@media (max-width: 900px) {
  .sector-grid { grid-template-columns: 1fr; gap: 0; }
  .sector-stage { display: none; }
  .sector-item { min-height: 0; padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.07); opacity: 1; }
  .sector-lane { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   CINEMATIC SCROLL STAGES (portal / parting lines / grid dive / scroll film / fly-through)
   Each stage is a tall section with a pinned 100vh viewport; the scroll position
   drives the camera move. Without motion (.xp-motion absent) every stage renders
   as a normal, static full-height section showing its end state.
   ========================================================================== */
.fx-stage { position: relative; height: 100vh; background: #000; }
.xp-motion .fx-stage { height: 190vh; }
.fx-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fx-stage video, .fx-stage .fx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-after { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; }
.fx-after > * { pointer-events: auto; }
.fx-after .fx-kicker { color: #fff; opacity: 0.85; font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 16px; }
.fx-after h2 { color: #fff; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 auto; max-width: 18ch; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.fx-after p { color: rgba(255,255,255,0.88); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.6; max-width: 560px; margin: 18px auto 0; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.fx-big { font-family: "DM Sans", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; color: #fff; white-space: nowrap; }
.fx-grad { background: linear-gradient(90deg, #8fa8ff, #b48cff 50%, #e38ad8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* A) portal */
.fx-portal-window { position: absolute; inset: 0; clip-path: circle(13% at 50% 50%); }
.fx-portal-window::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(3,4,9,0.25), rgba(3,4,9,0.7)); }
.fx-portal-ring { position: absolute; width: 27vmax; height: 27vmax; border-radius: 50%; border: 1px solid rgba(180,160,255,0.35); box-shadow: 0 0 80px rgba(123,63,228,0.35); pointer-events: none; }
.fx-portal-lines { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(27vmax + 30px); pointer-events: none; }
.fx-portal-lines .fx-big { font-size: clamp(34px, 6.2vw, 108px); }
html:not(.xp-motion) .fx-portal-window { clip-path: none; }
html:not(.xp-motion) .fx-portal-lines, html:not(.xp-motion) .fx-portal-ring { display: none; }

/* B) parting lines */
.fx-split-band { position: absolute; inset: 0; clip-path: inset(49.5% 0% 49.5% 0%); }
.fx-split-band::after { content: ""; position: absolute; inset: 0; background: rgba(3,4,9,0.45); }
.fx-split-lines { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.fx-split-lines .fx-big { font-size: clamp(44px, 9.2vw, 170px); }
.fx-split-top { margin-bottom: 0.06em; }
html:not(.xp-motion) .fx-split-band { clip-path: none; }
html:not(.xp-motion) .fx-split-lines { display: none; }

/* C) grid dive */
.fx-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: min(1100px, 92vw, 112vh); will-change: transform; }
.fx-tile { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid rgba(160,150,255,0.16); background: #07080f; }
.fx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-tile-centre { border-color: rgba(180,160,255,0.5); box-shadow: 0 20px 60px -20px rgba(123,63,228,0.7); }
.fx-tiles .fx-after { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(3,4,9,0.72), rgba(3,4,9,0.15) 80%); }
@media (max-width: 700px) { .fx-tiles-grid { gap: 8px; } .fx-tile { border-radius: 10px; } }
html:not(.xp-motion) .fx-tiles .fx-after { display: none; }

/* D) scroll film */
.fx-film-media { position: absolute; inset: 0; }
.fx-film-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,9,0.85) 0%, rgba(3,4,9,0.35) 55%, rgba(3,4,9,0.1) 100%); }
.fx-caps { position: absolute; left: 7vw; bottom: 16vh; width: min(560px, 86vw); height: 240px; z-index: 3; }
.fx-cap { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.fx-cap.is-on, html:not(.xp-motion) .fx-cap:first-child { opacity: 1; transform: none; }
.fx-cap small { color: #b9a6ff; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.fx-cap h3 { color: #fff; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; margin: 10px 0 12px; letter-spacing: -0.02em; }
.fx-cap p { color: rgba(255,255,255,0.84); font-size: 16px; line-height: 1.65; margin: 0; }

/* E) fly-through words */
.fx-depth-field { position: absolute; inset: -30%; background-image: radial-gradient(rgba(200,210,255,0.45) 1px, transparent 1.7px); background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(circle at center, transparent 8%, #000 40%, transparent 75%); mask-image: radial-gradient(circle at center, transparent 8%, #000 40%, transparent 75%); opacity: 0.55; }
.fx-depth-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, rgba(123,63,228,0.35), rgba(62,99,221,0.1) 40%, transparent 70%); }
.fx-word { position: absolute; font-size: clamp(64px, 15vw, 250px); opacity: 0; will-change: transform, opacity, filter; }
html:not(.xp-motion) .fx-word { position: static; opacity: 1; font-size: clamp(34px, 6vw, 80px); margin: 0 0.3em; }
html:not(.xp-motion) .fx-words { display: flex; flex-wrap: wrap; justify-content: center; }
html:not(.xp-motion) .fx-depth .fx-after { display: none; }

/* ==========================================================================
   EXTENDED PALETTE -- complementary colours that sit well on black next to the
   brand blue / violet / magenta, so the site stops reading as one purple wash.
   ========================================================================== */
:root { --c-sky: #38BDF8; --c-amber: #FBBF24; --c-coral: #FB7185; --c-mint: #34D399; --c-lilac: #C4B5FD; }
.text-accent-ocean  { background: linear-gradient(90deg, #7DD3FC, #38BDF8 45%, #818CF8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.text-accent-sunset { background: linear-gradient(90deg, #FCD34D, #FB923C 45%, #FB7185) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.text-accent-mint   { background: linear-gradient(90deg, #6EE7B7, #34D399 40%, #38BDF8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.kicker-sky   { color: var(--c-sky) !important; }
.kicker-amber { color: var(--c-amber) !important; }
.kicker-coral { color: var(--c-coral) !important; }
.kicker-mint  { color: var(--c-mint) !important; }
.kicker-lilac { color: var(--c-lilac) !important; }

/* ==========================================================================
   LAYOUT VARIETY -- every card section gets its own design; no icon boxes.
   ========================================================================== */
/* 1. STICKERS (About principles): vivid solid cards, tilted, straighten on hover */
.layout-stickers { gap: 30px !important; padding: 20px 0 34px; counter-reset: stk; }
.layout-stickers .about-card { counter-increment: stk; border: 0 !important; padding: 34px 30px 38px; border-radius: 24px; box-shadow: 0 34px 60px -30px rgba(0,0,0,0.9); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.layout-stickers .about-card:nth-child(1) { background: linear-gradient(150deg, #FEF3C7, #FBBF24); transform: rotate(-2.4deg); }
.layout-stickers .about-card:nth-child(2) { background: linear-gradient(150deg, #CFFAFE, #38BDF8); transform: rotate(1.8deg); margin-top: 22px; }
.layout-stickers .about-card:nth-child(3) { background: linear-gradient(150deg, #FCE7F3, #FB7185); transform: rotate(-1.2deg); }
.layout-stickers .about-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); }
.layout-stickers .about-card-icon, .layout-stickers .spot { display: none !important; }
.layout-stickers .about-card::before { content: counter(stk, decimal-leading-zero); display: block; font: 800 60px/1 "DM Sans", sans-serif; color: rgba(11,11,20,0.22); margin-bottom: 20px; }
.layout-stickers .about-card h3 { color: #0b0b14 !important; font-size: 25px; }
.layout-stickers .about-card p { color: rgba(11,11,20,0.78) !important; font-size: 15.5px; }
@media (max-width: 960px) { .layout-stickers .about-card { transform: none !important; margin-top: 0 !important; } }

/* 2. NUMBERED ROWS (About culture) */
.layout-rows { display: block !important; counter-reset: row; border-top: 1px solid rgba(255,255,255,0.1); }
.layout-rows .about-card { counter-increment: row; display: grid; grid-template-columns: 120px minmax(0,1fr) minmax(0,1.35fr); gap: 30px; align-items: baseline; height: auto;
  padding: 32px 10px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 0; transition: background 0.45s ease, padding 0.45s ease; }
.layout-rows .about-card-icon { display: none; }
.layout-rows .about-card::before { content: counter(row, decimal-leading-zero); font: 800 56px/1 "DM Sans", sans-serif; color: transparent; -webkit-text-stroke: 1.3px var(--rc, rgba(255,255,255,0.4)); transition: color 0.45s ease; }
.layout-rows .about-card:nth-child(6n+1) { --rc: var(--c-sky); } .layout-rows .about-card:nth-child(6n+2) { --rc: var(--c-amber); }
.layout-rows .about-card:nth-child(6n+3) { --rc: var(--c-mint); }  .layout-rows .about-card:nth-child(6n+4) { --rc: var(--c-coral); }
.layout-rows .about-card:nth-child(6n+5) { --rc: var(--c-lilac); } .layout-rows .about-card:nth-child(6n+6) { --rc: #818CF8; }
.layout-rows .about-card h3 { margin: 0; font-size: 26px; }
.layout-rows .about-card p { margin: 0; font-size: 16px; }
.layout-rows .about-card:hover { transform: none; padding-left: 26px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); }
.layout-rows .about-card:hover::before { color: var(--rc); }
@media (max-width: 760px) { .layout-rows .about-card { grid-template-columns: 62px 1fr; gap: 6px 16px; } .layout-rows .about-card::before { font-size: 36px; grid-row: span 2; } .layout-rows .about-card p { grid-column: 2; } }

/* 3. CHANNEL STRIPS (Services messaging types) */
.layout-strips { display: flex !important; flex-direction: column; gap: 14px; }
.layout-strips .svc-card { flex-direction: row; align-items: center; gap: 30px; padding: 28px 32px 28px 38px; }
.layout-strips .svc-card-icon { display: none; }
.layout-strips .svc-card::before { top: 0; bottom: 0; left: 0; right: auto; width: 6px; height: auto; opacity: 1; }
.layout-strips .svc-card:nth-child(1)::before { background: linear-gradient(180deg, #7DD3FC, #38BDF8); }
.layout-strips .svc-card:nth-child(2)::before { background: linear-gradient(180deg, #FCD34D, #FB923C); }
.layout-strips .svc-card:nth-child(3)::before { background: linear-gradient(180deg, #F9A8D4, #FB7185); }
.layout-strips .svc-card h3 { font-size: clamp(22px, 2.3vw, 31px); margin: 0; flex: 0 0 34%; }
.layout-strips .svc-card p { margin: 0; flex: 1; }
.layout-strips .svc-card-link { white-space: nowrap; }
.layout-strips .svc-card:hover { transform: translateX(10px); }
@media (max-width: 760px) { .layout-strips .svc-card { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* 4. PRODUCT WALL (Services VAS overview): giant multi-colour names, seamless grid */
.layout-wall { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; border: 1px solid rgba(255,255,255,0.09); border-radius: 24px; overflow: hidden; }
.layout-wall .svc-card { border-radius: 0; border: 0; border-right: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); background: transparent; padding: 38px 32px; }
.layout-wall .svc-card-icon, .layout-wall .svc-card::before { display: none; }
.layout-wall .svc-card h3 { font: 900 clamp(32px, 3.8vw, 56px)/1.02 "DM Sans", sans-serif; letter-spacing: -0.03em; margin: 0 0 16px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.layout-wall .svc-card:nth-child(1) h3 { background-image: linear-gradient(90deg, #7DD3FC, #818CF8); }
.layout-wall .svc-card:nth-child(2) h3 { background-image: linear-gradient(90deg, #FCD34D, #FB7185); }
.layout-wall .svc-card:nth-child(3) h3 { background-image: linear-gradient(90deg, #6EE7B7, #38BDF8); }
.layout-wall .svc-card:nth-child(4) h3 { background-image: linear-gradient(90deg, #C4B5FD, #E38AD8); }
.layout-wall .svc-card:nth-child(5) h3 { background-image: linear-gradient(90deg, #FB7185, #FBBF24); }
.layout-wall .svc-card:nth-child(6) h3 { background-image: linear-gradient(90deg, #8FA8FF, #B48CFF 50%, #E38AD8); }
.layout-wall .svc-card:hover { transform: none; background: rgba(255,255,255,0.035); }
@media (max-width: 1024px) { .layout-wall { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .layout-wall { grid-template-columns: 1fr !important; } }

/* 5. BENTO (Services Professional Services) */
.layout-bento { grid-template-columns: 1.25fr 1fr 1fr !important; grid-auto-rows: minmax(210px, auto); }
.layout-bento .svc-card-icon, .layout-bento .svc-card::before { display: none; }
.layout-bento .svc-card { border: 0; padding: 32px 30px; }
.layout-bento .svc-card:nth-child(1) { grid-row: span 2; justify-content: flex-end; background: radial-gradient(circle at 20% 15%, rgba(129,140,248,0.45), transparent 55%), linear-gradient(160deg, #1e1b4b, #0b0c13 75%); }
.layout-bento .svc-card:nth-child(1) h3 { font-size: clamp(32px, 3.2vw, 46px); }
.layout-bento .svc-card:nth-child(1) p { font-size: 17px; }
.layout-bento .svc-card:nth-child(2) { background: radial-gradient(circle at 100% 0%, rgba(251,191,36,0.32), transparent 60%), #0e0d12; }
.layout-bento .svc-card:nth-child(3) { background: radial-gradient(circle at 100% 0%, rgba(52,211,153,0.3), transparent 60%), #0b0f0f; }
.layout-bento .svc-card:nth-child(4) { grid-column: span 2; background: radial-gradient(circle at 0% 100%, rgba(251,113,133,0.3), transparent 55%), #100b0e; }
.layout-bento .svc-card:nth-child(2) h3 { color: #FCD34D; } .layout-bento .svc-card:nth-child(3) h3 { color: #6EE7B7; } .layout-bento .svc-card:nth-child(4) h3 { color: #FDA4AF; }
@media (max-width: 1024px) { .layout-bento { grid-template-columns: 1fr 1fr !important; } .layout-bento .svc-card:nth-child(1) { grid-row: auto; grid-column: span 2; } }
@media (max-width: 600px) { .layout-bento { grid-template-columns: 1fr !important; } .layout-bento .svc-card:nth-child(n) { grid-column: auto; } }

/* 6. SPEC SHEET (System Integration catalogue) */
.si-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 0 48px !important; border-top: 1px solid rgba(255,255,255,0.09); }
.si-grid .si-card { display: grid !important; grid-template-columns: 170px minmax(0,1fr); column-gap: 26px; align-content: start;
  background: none !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.09) !important; border-radius: 0 !important; padding: 32px 6px !important; box-shadow: none !important; }
.si-grid .si-card .si-icon { display: none !important; }
.si-grid .si-card h3 { grid-row: 1 / span 4; margin: 0 !important; font: 800 28px/1.08 "DM Sans", sans-serif !important; color: var(--sc) !important; }
.si-grid .si-card > :not(h3) { grid-column: 2; }
.si-grid .si-card .si-fullname { margin-top: 0 !important; }
.si-grid .si-card:nth-child(5n+1) { --sc: #7DD3FC; } .si-grid .si-card:nth-child(5n+2) { --sc: #FCD34D; } .si-grid .si-card:nth-child(5n+3) { --sc: #6EE7B7; }
.si-grid .si-card:nth-child(5n+4) { --sc: #FDA4AF; } .si-grid .si-card:nth-child(5n+5) { --sc: #C4B5FD; }
@media (max-width: 900px) { .si-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .si-grid .si-card { grid-template-columns: 1fr; } .si-grid .si-card h3 { grid-row: auto; margin-bottom: 8px !important; } .si-grid .si-card > :not(h3) { grid-column: 1; } }

/* 7. STATEMENT TILES (Homepage "Why Cyberscape"): staggered, big colour titles, faint index */
.why-card { position: relative; overflow: hidden; padding: 40px 30px 36px !important; }
.why-card .si-icon { display: none !important; }
.why-card h3 { font-size: 26px !important; line-height: 1.15; }
.why-card::after { position: absolute; right: 18px; top: 8px; font: 900 88px/1 "DM Sans", sans-serif; color: rgba(255,255,255,0.05); }
.why-card:nth-child(1)::after { content: "01"; } .why-card:nth-child(2)::after { content: "02"; } .why-card:nth-child(3)::after { content: "03"; } .why-card:nth-child(4)::after { content: "04"; }
.why-card:nth-child(1) h3 { color: #7DD3FC !important; } .why-card:nth-child(2) h3 { color: #FCD34D !important; }
.why-card:nth-child(3) h3 { color: #6EE7B7 !important; } .why-card:nth-child(4) h3 { color: #FDA4AF !important; }
@media (min-width: 900px) { .why-card:nth-child(even) { margin-top: 36px; } }

/* 8. TINTED TILES (country pages "More Than SMS") */
.beyond-sms-card .si-icon { display: none !important; }
.beyond-sms-card { border: 0 !important; border-radius: 20px !important; padding: 32px 28px !important; }
.beyond-sms-card:nth-child(4n+1) { background: radial-gradient(circle at 0% 0%, rgba(56,189,248,0.28), transparent 60%), #0b0e14 !important; }
.beyond-sms-card:nth-child(4n+2) { background: radial-gradient(circle at 0% 0%, rgba(251,191,36,0.24), transparent 60%), #0e0d10 !important; }
.beyond-sms-card:nth-child(4n+3) { background: radial-gradient(circle at 0% 0%, rgba(52,211,153,0.24), transparent 60%), #0b0f0e !important; }
.beyond-sms-card:nth-child(4n+4) { background: radial-gradient(circle at 0% 0%, rgba(251,113,133,0.26), transparent 60%), #100b0d !important; }
.beyond-sms-card:nth-child(4n+1) h4 { color: #7DD3FC !important; } .beyond-sms-card:nth-child(4n+2) h4 { color: #FCD34D !important; }
.beyond-sms-card:nth-child(4n+3) h4 { color: #6EE7B7 !important; } .beyond-sms-card:nth-child(4n+4) h4 { color: #FDA4AF !important; }
.beyond-sms-card h4 { font-size: 22px !important; }
/* four channel tiles: a balanced 2x2 instead of 3 + an orphan */
*:has(> .beyond-sms-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { *:has(> .beyond-sms-card) { grid-template-columns: 1fr !important; } }

/* word-split headings laid out with flexbox: space the words with a gap */
.xw-flexfix { flex-wrap: wrap !important; column-gap: 0.27em !important; }

/* ==========================================================================
   LEGACY ICON BOXES (country + industry pages): icons out; each section on a
   page gets a different design (numbered / giant titles / check rows / tags)
   ========================================================================== */
.elementor-widget-mae-icon-box[class*="lx-"] .master-icon,
.elementor-widget-mae-icon-box[class*="lx-"] .icon-wrap,
.elementor-widget-mae-icon-box[class*="lx-"] .icon-wrap2,
.elementor-widget-mae-icon-box[class*="lx-"] .bg-hover { display: none !important; }
.elementor-widget-mae-icon-box[class*="lx-"] > .elementor-widget-container { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 100%; }
.elementor-widget-mae-icon-box[class*="lx-"] .master-icon-box { text-align: left !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 100%; }
.elementor-widget-mae-icon-box[class*="lx-"] .text-wrap { text-align: left !important; padding: 0 !important; }
.elementor-widget-mae-icon-box[class*="lx-"] .text-wrap h3 { color: #fff !important; margin: 0 0 10px !important; text-align: left !important; }
.elementor-widget-mae-icon-box[class*="lx-"] .desc { color: #a3adc2 !important; text-align: left !important; font-size: 15px !important; line-height: 1.7 !important; }
.lxc-1 { --lc: #38BDF8; --lg: linear-gradient(90deg, #7DD3FC, #818CF8); }
.lxc-2 { --lc: #FBBF24; --lg: linear-gradient(90deg, #FCD34D, #FB7185); }
.lxc-3 { --lc: #34D399; --lg: linear-gradient(90deg, #6EE7B7, #38BDF8); }
.lxc-4 { --lc: #FB7185; --lg: linear-gradient(90deg, #FDA4AF, #C4B5FD); }

/* A. numbered: coloured rule on top, big outlined index */
.elementor-widget-mae-icon-box.lx-num .master-icon-box { padding: 30px 84px 6px 4px !important; box-shadow: inset 0 2px 0 var(--lc) !important; position: relative; }   /* right padding = a column for the index */
.elementor-widget-mae-icon-box.lx-num::after { content: attr(data-n); position: absolute; top: 20px; right: 6px; font: 800 58px/1 "DM Sans", sans-serif; color: transparent; -webkit-text-stroke: 1.2px var(--lc); opacity: 0.75; pointer-events: none; }
.elementor-widget-mae-icon-box.lx-num .text-wrap h3 { font-size: 21px !important; }

/* B. giant gradient titles separated by thin rules */
.elementor-widget-mae-icon-box.lx-giant .master-icon-box { padding: 6px 0 6px 24px !important; border-left: 1px solid rgba(255,255,255,0.12) !important; }
.elementor-widget-mae-icon-box.lx-giant .text-wrap h3 { font: 900 clamp(26px, 2.5vw, 38px)/1.05 "DM Sans", sans-serif !important; letter-spacing: -0.02em;
  background: var(--lg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; }

/* C. check rows: a list, not cards */
.elementor-widget-mae-icon-box.lx-check .master-icon-box { display: flex !important; flex-direction: row !important; gap: 18px; align-items: flex-start; padding: 22px !important; border-radius: 16px !important;
  background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.07) !important; }
.elementor-widget-mae-icon-box.lx-check .text-wrap { flex: 1; min-width: 0; }
.elementor-widget-mae-icon-box.lx-check .master-icon-box::before { content: "\2713"; flex: none; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #0b0b14; background: var(--lc); }

/* D. tag badges: the title becomes a coloured badge, the sentence takes the stage */
.elementor-widget-mae-icon-box.lx-tag .master-icon-box { padding: 28px 26px !important; border-radius: 18px !important;
  border: 1px dashed color-mix(in srgb, var(--lc) 45%, transparent) !important;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--lc) 16%, transparent), transparent 55%) !important; }
.elementor-widget-mae-icon-box.lx-tag .text-wrap h3 { display: inline-block; padding: 6px 14px !important; border-radius: 999px; font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc) !important; background: color-mix(in srgb, var(--lc) 14%, transparent); margin-bottom: 16px !important; }
.elementor-widget-mae-icon-box.lx-tag .desc { color: #e6e9f5 !important; font-size: 16.5px !important; }

/* services-card (Services channel sections, Careers): colour-topped cards, no icon squares */
.services-card .si-icon { display: none !important; }
.services-card { border-top: 3px solid var(--svc, #818CF8) !important; padding-top: 28px !important; }
.services-card:nth-child(4n+1) { --svc: #38BDF8; } .services-card:nth-child(4n+2) { --svc: #FBBF24; }
.services-card:nth-child(4n+3) { --svc: #34D399; } .services-card:nth-child(4n+4) { --svc: #FB7185; }
.services-card h3, .services-card h4 { color: var(--svc) !important; }

/* ---- sector films as industry-page hero backgrounds ---- */
.hero-futuristic.hero-sector { position: relative; isolation: isolate; overflow: hidden; min-height: 74vh; display: flex; flex-direction: column; justify-content: center; background: #030409; }
.hero-sector > .hero-futuristic-inner { width: 100%; }
.hero-sector > .hero-video, .hero-sector > .hero-video-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sector > .hero-video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
.hero-sector > .hero-video-shade { background: radial-gradient(ellipse 65% 60% at 50% 45%, rgba(3,4,9,0.74), rgba(3,4,9,0.38) 60%, rgba(3,4,9,0.12) 85%),
  linear-gradient(to bottom, rgba(3,4,9,0.6) 0%, rgba(3,4,9,0) 26%, rgba(3,4,9,0) 70%, rgba(3,4,9,0.95) 100%); }
.hero-sector > .hero-glow, .hero-sector > .hero-network { display: none; }
/* product wall: 8 tiles = 4 x 2 on wide screens */
@media (min-width: 1200px) { .layout-wall { grid-template-columns: repeat(4, 1fr) !important; } }
.layout-wall .svc-card:nth-child(7) h3 { background-image: linear-gradient(90deg, #34D399, #FBBF24); }
.layout-wall .svc-card:nth-child(8) h3 { background-image: linear-gradient(90deg, #38BDF8, #C4B5FD); }
@media (min-width: 1200px) { .layout-wall .svc-card h3 { font-size: clamp(28px, 2.35vw, 40px); } }   /* 4 columns: keep "Voicemail" whole */

/* every video on the site is a silent decorative loop: never show player UI, on any platform */
video { pointer-events: none; }
video::-webkit-media-controls, video::-webkit-media-controls-enclosure, video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-enclosure, video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-play-button {
  display: none !important; -webkit-appearance: none !important; appearance: none !important; opacity: 0 !important; }

/* ---- Industries: sector gallery tiles (name over a scene still) ---- */
.industries-grid.sector-tiles { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
.sector-tiles .industry-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; isolation: isolate; padding: 0 !important;
  background: #07080f !important; border: 1px solid rgba(160,150,255,0.14) !important; text-decoration: none; transform: none !important; }
.sector-tiles .industry-card-media { position: absolute; inset: 0; z-index: -1; height: auto !important; margin: 0 !important; border-radius: 0 !important; }
.sector-tiles .industry-card-media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.sector-tiles .industry-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,5,12,0.94) 0%, rgba(4,5,12,0.55) 45%, rgba(4,5,12,0.05) 100%); }
.sector-tiles .industry-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px !important; }
.sector-tiles .industry-card-body h3 { color: #fff !important; font-size: 19px !important; line-height: 1.2; margin: 0 0 6px !important; }
.sector-tiles .industry-card-body p { color: rgba(230,233,245,0.78) !important; font-size: 13.5px !important; line-height: 1.5; margin: 0 !important;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s ease, opacity 0.45s ease; }
.sector-tiles .industry-card:hover img { transform: scale(1.08); }
.sector-tiles .industry-card:hover .industry-card-body p, .sector-tiles .industry-card:focus-visible .industry-card-body p { max-height: 80px; opacity: 1; }
.sector-tiles .industry-card:hover { border-color: rgba(180,160,255,0.45) !important; }
@media (hover: none) { .sector-tiles .industry-card-body p { max-height: none; opacity: 1; } }
@media (max-width: 1024px) { .industries-grid.sector-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 700px) { .industries-grid.sector-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .sector-tiles .industry-card { aspect-ratio: 3 / 4; } .sector-tiles .industry-card-body { padding: 12px !important; }
  .sector-tiles .industry-card-body h3 { font-size: 15px !important; } .sector-tiles .industry-card-body p { display: none; } }

/* ==========================================================================
   MEGA MENU v2 -- icon + label + one-line description (infobip-style)
   ========================================================================== */
#main-nav .mega-menu { background: rgba(9,10,19,0.97) !important; border: 1px solid rgba(160,150,255,0.18) !important; border-radius: 20px !important;
  box-shadow: 0 34px 90px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02) inset !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 22px 18px !important; }
#main-nav .mega-menu .mega-menu-heading { color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 12px 10px !important; }
#main-nav .mega-menu .mega-menu-heading em { display: block; margin-top: 4px; color: #8e97b3; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.mega-menu a.mm-link { display: flex !important; align-items: flex-start; gap: 13px; padding: 10px 12px !important; border-radius: 12px; line-height: 1.3 !important; transition: background 0.2s ease; }
.mega-menu a.mm-link:hover, .mega-menu a.mm-link:focus-visible { background: rgba(255,255,255,0.06); }
.mega-menu .mm-ico { flex: none; margin-top: 1px; color: var(--mm, #C4B5FD); transition: transform 0.25s ease, color 0.25s ease; }
.mega-menu a.mm-link:hover .mm-ico { transform: translateY(-1px) scale(1.1); }
.mega-menu .mm-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-menu .mm-text > span { color: #fff !important; font-size: 14.5px !important; font-weight: 600 !important; }
.mega-menu .mm-text > span::before, .mega-menu .mm-text > span::after { display: none !important; }
.mega-menu .mm-text small { color: #8e97b3; font-size: 12.5px; font-weight: 400; white-space: normal; }
.mega-menu a.mm-link[href^="/promotional"], .mega-menu a.mm-link[href^="/otp"], .mega-menu a.mm-link[href^="/alert"], .mega-menu a.mm-link[href*="our-services"] { --mm: #38BDF8; }
.mega-menu a.mm-link[href*="system-integration"] { --mm: #B48CFF; }
.mega-menu a.mm-link[href*="professional-services"] { --mm: #FBBF24; }
.mega-menu a.mm-link[href*="e-commerce"], .mega-menu a.mm-link[href*="/retail"], .mega-menu a.mm-link[href*="restaurants"], .mega-menu a.mm-link[href*="hospitality"] { --mm: #FBBF24; }
.mega-menu a.mm-link[href*="banking"], .mega-menu a.mm-link[href*="real-estate"], .mega-menu a.mm-link[href*="non-profit"] { --mm: #38BDF8; }
.mega-menu a.mm-link[href*="healthcare"], .mega-menu a.mm-link[href*="education"], .mega-menu a.mm-link[href*="government"] { --mm: #34D399; }
.mega-menu a.mm-link[href*="telecommunications"], .mega-menu a.mm-link[href*="logistics"], .mega-menu a.mm-link[href*="utilities"], .mega-menu a.mm-link[href*="entertainment"],
.mega-menu a.mm-link[href*="fitness"], .mega-menu a.mm-link[href*="automotive"] { --mm: #FB7185; }
/* phone menu: keep icons, drop the descriptions */
#main-nav-mobi .mm-text small { display: none; }
#main-nav-mobi a.mm-link { display: flex !important; align-items: center; gap: 12px; }
#main-nav-mobi .mm-ico { color: var(--mm, #C4B5FD); }
/* services dropdown: wide enough for icon + label + description in three columns */
@media (min-width: 992px) {
  #main-nav .mega-menu.mega-menu-3col { width: 940px !important; max-width: 94vw; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 10px !important; }
  #main-nav .mega-menu.mega-menu-4col { column-gap: 8px !important; }
}
#main-nav .mega-menu li.menu-item { border-bottom: 0 !important; }
.mega-menu a.mm-link .mm-text { display: flex !important; flex-direction: column !important; }
.mega-menu a.mm-link .mm-text small { display: block !important; }
.mega-menu a.mm-link .mm-text > span { display: block !important; white-space: normal !important; }
/* Mega menus: a real grid. Every item is pinned to its heading's column (mmc-N), and "dense"
   packing fills each column top-down, so items never spill into a neighbouring column the way the
   old CSS multi-column flow did (which pushed "Email API" into column two). */
@media (min-width: 992px) {
  #main-nav .sub-menu.mega-menu.mega-menu-3col, #main-nav .sub-menu.mega-menu.mega-menu-4col {
    display: grid !important; columns: auto !important; grid-auto-flow: row dense; align-content: start; column-gap: 10px !important; }
  #main-nav .sub-menu.mega-menu.mega-menu-3col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #main-nav .sub-menu.mega-menu.mega-menu-4col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 1040px !important; max-width: 94vw; }
  #main-nav .mega-menu .mmc-1 { grid-column: 1; } #main-nav .mega-menu .mmc-2 { grid-column: 2; }
  #main-nav .mega-menu .mmc-3 { grid-column: 3; } #main-nav .mega-menu .mmc-4 { grid-column: 4; }
  #main-nav .mega-menu li { break-inside: auto; }
  #main-nav .mega-menu .mega-menu-viewall { display: inline-block; margin: 8px 12px 4px; font-weight: 700; font-size: 13.5px; }
}

html, html body { background-color: #000 !important; }   /* the legacy stylesheet sets body to white: that was the white flash */

/* ---- Industries opening: a city seen from above, sector pins, and a live window to dive into ---- */
.fx-tiles-grid.fx-city { display: block !important; position: relative; width: 100vw; height: 100vh; gap: 0 !important; }
.fx-city-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(1.1); }
.fx-city .fx-tile-centre { position: absolute; left: 50%; top: 50%; width: min(36vw, 560px); aspect-ratio: 16 / 10; transform: translate(-50%, -50%);
  border-radius: 18px; overflow: hidden; border: 2px solid rgba(190,170,255,0.75); box-shadow: 0 0 0 7px rgba(123,63,228,0.18), 0 0 60px rgba(123,63,228,0.45), 0 30px 80px rgba(0,0,0,0.6); }
.fx-live { position: absolute; left: 12px; top: 10px; z-index: 2; font: 700 11px/1 "DM Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  padding: 6px 9px; border-radius: 999px; background: rgba(9,10,19,0.72); }
.fx-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #FB7185; margin-right: 6px; box-shadow: 0 0 8px #FB7185; animation: fxLive 1.6s ease-in-out infinite; }
@keyframes fxLive { 50% { opacity: 0.35; } }
.fx-city .fx-pin { position: absolute; aspect-ratio: auto; transform: translate(-50%, -100%); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(170,160,255,0.35);
  background: rgba(9,10,19,0.84); color: #fff; font: 600 13px/1 "DM Sans", sans-serif; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: visible; }
.fx-city .fx-pin i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--pc); box-shadow: 0 0 10px var(--pc); vertical-align: 1px; }
.fx-city .fx-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 26px; background: linear-gradient(var(--pc), transparent); }
@media (max-width: 700px) { .fx-city .fx-tile-centre { width: 72vw; } .fx-city .fx-pin { font-size: 11px; padding: 5px 9px; } .fx-city .fx-pin:nth-of-type(even) { display: none; } }

/* ---- Industries: image-free sector index ---- */
.sector-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; border-top: 1px solid rgba(255,255,255,0.1); }
.sx-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; grid-template-areas: "ico name arrow" "ico desc arrow"; column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); text-decoration: none; border-radius: 0; transition: background 0.3s ease, padding 0.3s ease; }
.sx-row .mm-ico { grid-area: ico; width: 24px; height: 24px; color: var(--mm, #C4B5FD); align-self: start; margin-top: 2px; }
.sx-name { grid-area: name; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sx-desc { grid-area: desc; color: #98a2bb; font-size: 14.5px; line-height: 1.5; }
.sx-arrow { grid-area: arrow; color: #8e97b3; font-size: 20px; transition: transform 0.3s ease, color 0.3s ease; }
.sx-row:hover { background: linear-gradient(90deg, rgba(123,63,228,0.12), rgba(123,63,228,0)); padding-left: 18px; }
.sx-row:hover .sx-arrow { transform: translateX(6px); color: #fff; }
.sx-row[href*="e-commerce"], .sx-row[href*="/retail"], .sx-row[href*="restaurants"], .sx-row[href*="hospitality"] { --mm: #FBBF24; }
.sx-row[href*="banking"], .sx-row[href*="real-estate"], .sx-row[href*="non-profit"] { --mm: #38BDF8; }
.sx-row[href*="healthcare"], .sx-row[href*="education"], .sx-row[href*="government"] { --mm: #34D399; }
.sx-row[href*="telecom"], .sx-row[href*="logistics"], .sx-row[href*="utilities"], .sx-row[href*="entertainment"], .sx-row[href*="fitness"], .sx-row[href*="automotive"] { --mm: #FB7185; }
@media (max-width: 760px) { .sector-index { grid-template-columns: 1fr; } .sx-name { font-size: 17px; } }

/* ==========================================================================
   SERVICE PAGE TEMPLATE (WhatsApp, RCS, Email, SMSC, USSD/RBT/VVM, Firewall & eSIM,
   ADM, Consulting, Fiber, Promotional/OTP/Alert SMS)
   ========================================================================== */
.svcp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.svcp-copy h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; margin: 12px 0 18px; letter-spacing: -0.02em; }
.svcp-copy p { color: #b3bcd2; font-size: 16.5px; line-height: 1.75; margin: 0 0 14px; }
.svcp-facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svcp-facts li { padding: 11px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); display: flex; flex-direction: column; gap: 3px; }
.svcp-facts b { color: #fff; font-size: 14.5px; } .svcp-facts span { color: #8e97b3; font-size: 12.5px; }
.svcp-media, .svcp-second { border-radius: 22px; overflow: hidden; border: 1px solid rgba(160,150,255,0.2); box-shadow: 0 40px 90px -40px rgba(123,63,228,0.6); background: #07080f; }
.svcp-media img, .svcp-second img { display: block; width: 100%; height: auto; }
.svcp-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; counter-reset: none; }
.svcp-steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-magenta)); opacity: 0.55; }
.svcp-steps li { position: relative; padding-top: 62px; }
.svcp-step-n { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 15px/1 "DM Sans", sans-serif; color: #fff; background: #0b0c16; border: 2px solid rgba(180,160,255,0.6); box-shadow: 0 0 24px rgba(123,63,228,0.45); }
.svcp-steps h3 { color: #fff; font-size: 19px; margin: 0 0 8px; } .svcp-steps p { color: #a3adc2; font-size: 15px; line-height: 1.65; margin: 0; }
.svcp-second { margin: 56px auto 0; max-width: 860px; }
.svcp-uses .sx-row { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "name arrow" "desc arrow"; }
.layout-strips .svc-card:nth-child(4)::before { background: linear-gradient(180deg, #6EE7B7, #34D399); }
@media (max-width: 960px) { .svcp-split { grid-template-columns: 1fr; gap: 36px; } .svcp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } .svcp-steps::before { display: none; } }
@media (max-width: 560px) { .svcp-steps { grid-template-columns: 1fr; } }
/* country pages: intro text that replaced the removed pricing column */
.lp-intro { padding: 10px 0; } .lp-intro h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; margin: 12px 0 16px; letter-spacing: -0.02em; }
.lp-intro p { color: #b3bcd2; font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; max-width: 540px; }
/* blog explainer -> service page callout */
.svc-callout { margin: 44px 0 10px; padding: 26px 28px; border-radius: 20px; background: radial-gradient(circle at 0% 0%, rgba(52,211,153,0.16), transparent 55%), #0c0e16; border: 1px solid rgba(110,231,183,0.25); }
.svc-callout p { color: #d5dbeb; font-size: 17px; margin: 10px 0 18px; }
.si-service-link { display: inline-block; margin-top: 6px; font-weight: 700; }
.svcp-jump { margin: 10px 0 0; }
.fx-after .fx-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
/* The legacy theme paints its submenu hover as a near-white ::after layer across the whole item
   (that was the "goes all white" on hover). Remove it everywhere in the dropdowns. */
#main-nav .sub-menu a::after, #main-nav .sub-menu a::before, #main-nav .sub-menu li::after,
#main-nav-mobi .sub-menu a::after, #main-nav-mobi .sub-menu a::before { content: none !important; display: none !important; background: none !important; }
#main-nav .mega-menu a.mm-link:hover, #main-nav .mega-menu a.mm-link:focus-visible { background: rgba(255,255,255,0.07) !important; color: inherit !important; }
#main-nav .mega-menu a.mega-menu-viewall:hover { background: none !important; color: #fff !important; }

/* ==========================================================================
   MOTION v2 -- entrance families (assigned per group by reveal.js, rotated so
   neighbouring sections never share the same entrance)
   ========================================================================== */
.js .scroll-reveal.rv-tilt { transform: perspective(900px) rotateX(22deg) translateY(40px); transform-origin: 50% 100%; filter: none; }
.js .scroll-reveal.rv-pop { transform: scale(0.84); filter: blur(4px); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-duration: 0.8s; }
.js .scroll-reveal.rv-from-left { transform: translateX(-70px); filter: none; }
.js .scroll-reveal.rv-from-right { transform: translateX(70px); filter: none; }
.js .scroll-reveal.rv-wave { transform: translateY(26px) rotate(-1.5deg); filter: blur(6px); }
.js .scroll-reveal.rv-focus { transform: scale(1.04); filter: blur(16px); }
.js .scroll-reveal.rv-tilt.in-view, .js .scroll-reveal.rv-pop.in-view, .js .scroll-reveal.rv-from-left.in-view, .js .scroll-reveal.rv-from-right.in-view,
.js .scroll-reveal.rv-wave.in-view, .js .scroll-reveal.rv-focus.in-view { transform: none; filter: blur(0); opacity: 1; }
.js .scroll-reveal-group.in-view > .rv-pop { transition-delay: calc(var(--reveal-index, 0) * 110ms); }
.js .scroll-reveal-group.in-view > .rv-wave { transition-delay: calc(var(--reveal-index, 0) * 120ms); }
@media (max-width: 700px) { .js .scroll-reveal.rv-from-left, .js .scroll-reveal.rv-from-right { transform: translateX(0) translateY(30px); } }
/* heading entrances */
.xw-open .xw { overflow: visible !important; }
.xw-3d { perspective: 700px; } .xw-3d .xw-i { display: inline-block; transform-style: preserve-3d; }
.xh-wipe-host { position: relative; }
.xh-wipe { position: absolute; left: 0; top: 8%; bottom: 8%; right: 0; border-radius: 6px; background: linear-gradient(90deg, #3E63DD, #7B3FE4 55%, #C13FBD); transform: scaleX(0); pointer-events: none; z-index: 2; }
/* picture curtain */
.xm-curtain-host { position: relative; overflow: hidden; }
.xm-curtain { position: absolute; inset: 0; z-index: 3; background: linear-gradient(120deg, #1b1f4a, #3E63DD 40%, #7B3FE4 70%, #C13FBD); pointer-events: none; }
/* reading progress (blog posts) */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 10000; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #38BDF8, #7B3FE4, #C13FBD); box-shadow: 0 0 12px rgba(123,63,228,0.6); pointer-events: none; }
/* one shimmer sweep across highlighted words */
.text-accent.is-shimmer:not(.hero-anim-word) { background-size: 220% 100% !important; animation: csShimmer 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s 1 both; }
@keyframes csShimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* animated gradient beam around cards on hover */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.svc-card, .blog-index-card, .wizard-card { position: relative; }
.svc-card::after, .blog-index-card::after, .wizard-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--beam), transparent 0deg, #38BDF8 60deg, #7B3FE4 120deg, #C13FBD 170deg, transparent 230deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.35s ease; }
.svc-card:hover::after, .blog-index-card:hover::after, .wizard-card:hover::after { opacity: 1; animation: csBeam 2.4s linear infinite; }
@keyframes csBeam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) { .text-accent.is-shimmer, .svc-card:hover::after, .blog-index-card:hover::after, .wizard-card:hover::after { animation: none; } }

/* ==========================================================================
   CREATIVE EFFECTS (creative.js)
   ========================================================================== */
/* 1. network trace navigator */
.trace-nav { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); width: 20px; z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.trace-nav.is-visible { opacity: 1; pointer-events: auto; }
.trace-line, .trace-fill { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
.trace-line { background: rgba(160,170,220,0.18); }
.trace-fill { background: linear-gradient(#38BDF8, #7B3FE4 55%, #C13FBD); transform-origin: 50% 0; transform: scaleY(0); box-shadow: 0 0 10px rgba(123,63,228,0.6); }
.trace-packet { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(123,63,228,0.35), 0 0 16px #7B3FE4; transition: transform 0.15s linear; }
.trace-node { position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border-radius: 50%; border: 2px solid rgba(160,170,220,0.45); background: #05060c; cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.trace-node.is-passed { border-color: #8f9dff; background: #3E63DD; }
.trace-node.is-active { transform: scale(1.35); border-color: #fff; background: #7B3FE4; box-shadow: 0 0 14px rgba(123,63,228,0.8); }
.trace-label { position: absolute; left: 22px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: 6px 11px; border-radius: 8px; background: rgba(9,10,19,0.94); border: 1px solid rgba(160,150,255,0.25);
  color: #e6e9f5; font: 600 12.5px/1 "DM Sans", sans-serif; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.trace-node:hover .trace-label, .trace-node:focus-visible .trace-label { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1199px) { .trace-nav { display: none; } }

/* 2. API demo */
.api-demo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr); gap: 34px; align-items: center; max-width: 1080px; margin: 10px auto 0; }
.api-term { border-radius: 16px; overflow: hidden; background: #0a0c16; border: 1px solid rgba(160,150,255,0.22); box-shadow: 0 40px 90px -40px rgba(62,99,221,0.6); }
.api-term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #10132a; border-bottom: 1px solid rgba(255,255,255,0.06); }
.api-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FB7185; } .api-term-bar i:nth-child(2) { background: #FBBF24; } .api-term-bar i:nth-child(3) { background: #34D399; }
.api-term-bar span { margin-left: 10px; color: #8e97b3; font: 600 12.5px/1 ui-monospace, Menlo, Consolas, monospace; }
.api-term-bar b { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.07); color: #cfd5ea; font: 700 11.5px/1 ui-monospace, Menlo, monospace; transition: background 0.3s, color 0.3s; }
.api-term-bar b.is-ok { background: rgba(52,211,153,0.16); color: #6EE7B7; }
.api-code, .api-resp { margin: 0; padding: 18px 20px; color: #d5dbeb; font: 13.5px/1.65 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.api-code { min-height: 300px; }
.api-resp { border-top: 1px dashed rgba(255,255,255,0.1); color: #6EE7B7; }
.api-resp.is-in { animation: apiIn 0.45s ease both; }
.tk-verb { color: #FBBF24; font-weight: 700; } .tk-hdr { color: #C4B5FD; } .tk-key { color: #7DD3FC; } .tk-str { color: #F9A8D4; }
.api-caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #8fb0ff; animation: apiBlink 0.8s steps(1) infinite; }
@keyframes apiBlink { 50% { opacity: 0; } } @keyframes apiIn { from { opacity: 0; transform: translateY(8px); } }
.api-phone { position: relative; width: 100%; max-width: 270px; margin: 0 auto; aspect-ratio: 9 / 17; border-radius: 34px; padding: 14px; background: #06070d; border: 2px solid rgba(180,170,255,0.3); box-shadow: 0 30px 80px -30px rgba(123,63,228,0.7); }
.api-phone-notch { width: 34%; height: 18px; margin: 0 auto 14px; border-radius: 0 0 12px 12px; background: #000; }
.api-phone-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); color: #fff; font: 700 14px/1 "DM Sans", sans-serif; }
.api-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: linear-gradient(135deg, #3E63DD, #C13FBD); }
.api-msg { position: relative; margin-top: 18px; padding: 12px 14px 22px; border-radius: 16px 16px 16px 4px; background: #1b1f36; color: #e6e9f5; font-size: 13.5px; line-height: 1.5;
  opacity: 0; transform: translateY(16px) scale(0.92); transform-origin: 0 100%; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.api-msg.is-in { opacity: 1; transform: none; }
.api-ticks { position: absolute; right: 12px; bottom: 6px; color: #38BDF8; font-size: 11px; letter-spacing: -2px; }
.api-note { text-align: center; color: #6b7390; font-size: 13px; margin: 18px 0 0; }
@media (max-width: 860px) { .api-demo { grid-template-columns: 1fr; } .api-code { min-height: 0; } .api-phone { max-width: 230px; } }

/* 3. odometer */
.stat-number[data-odometer] { display: inline-flex; align-items: flex-start; }
.odo-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1); }
.odo-strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo-suffix { line-height: 1; }

/* 4. pixel-tile reveal */
.tile-host { position: relative; overflow: hidden; }
.tile-veil { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(6, 1fr); pointer-events: none; perspective: 600px; }
.tile-veil span { transition: transform 0.55s cubic-bezier(0.55, 0, 0.3, 1), opacity 0.55s ease; transform-origin: 50% 50%; }
.tile-veil span.is-gone { transform: rotateY(90deg) scale(0.6); opacity: 0; }

/* 5. signal glitch on product names */
.glitch-ready { position: relative; }
.glitch-ready:hover::before, .glitch-ready:hover::after { content: attr(data-glitch); position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-text-fill-color: currentColor; background: none !important; mix-blend-mode: screen; }
.glitch-ready:hover::before { color: #38BDF8; animation: glitchA 0.45s steps(2) 2; }
.glitch-ready:hover::after { color: #FB7185; animation: glitchB 0.45s steps(2) 2; }
@keyframes glitchA { 0% { transform: translate(-3px, 1px); clip-path: inset(0 0 60% 0); } 50% { transform: translate(2px, -1px); clip-path: inset(40% 0 20% 0); } 100% { transform: none; clip-path: inset(0 0 100% 0); } }
@keyframes glitchB { 0% { transform: translate(3px, -1px); clip-path: inset(55% 0 0 0); } 50% { transform: translate(-2px, 1px); clip-path: inset(10% 0 55% 0); } 100% { transform: none; clip-path: inset(100% 0 0 0); } }

/* 6. click ping */
.click-ping { position: fixed; z-index: 99999; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(143,176,255,0.9); animation: clickPing 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.click-ping::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(193,63,189,0.7); animation: clickPing 0.8s 0.12s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes clickPing { to { transform: scale(7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .odo-strip, .api-msg, .tile-veil span { transition: none !important; } .api-caret, .glitch-ready::before, .glitch-ready::after { animation: none !important; display: none; } }
/* the legacy theme gives every <pre> a light background and border: keep the terminal dark */
.api-term pre.api-code, .api-term pre.api-resp { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* ---- country pages (rebuilt, multichannel) ---- */
.svcp-split-rev > .svcp-media { order: 0; } .svcp-split-rev > .svcp-copy { order: 1; }
.op-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 16px; }
.op-chip { padding: 9px 15px; border-radius: 999px; background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.35); color: #e6f6ff; font-weight: 700; font-size: 14px; }
.op-note { color: #8e97b3 !important; font-size: 14.5px !important; }
.use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.use-card { padding: 22px 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(123,63,228,0.12), rgba(255,255,255,0.02)); border: 1px solid rgba(160,150,255,0.18); }
.use-card h3 { color: #fff; font-size: 18px; margin: 10px 0 8px; } .use-card p { color: #a3adc2; font-size: 14.5px; line-height: 1.6; margin: 0; }
.use-tags { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(251,191,36,0.12); color: #FCD34D; font: 700 11.5px/1.3 "DM Sans", sans-serif; letter-spacing: 0.04em; }
.svcp-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .svcp-split-rev > .svcp-media { order: 1; } .svcp-steps-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .use-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   INDUSTRY PAGES (multi-channel, tailored visuals)
   ========================================================================== */
.ind-hero { padding: 150px 0 70px; }
.ind-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 50px; align-items: center; position: relative; z-index: 2; }
.ind-hero-copy { text-align: left; }
.ind-hero-copy .hero-futuristic-title { text-align: left; font-size: clamp(34px, 4vw, 58px); }
.ind-hero-copy .hero-futuristic-sub { text-align: left; margin-left: 0; }
.ind-hero-copy .hero-futuristic-cta { justify-content: flex-start; }
.ind-hero-art { border-radius: 26px; overflow: hidden; border: 1px solid rgba(160,150,255,0.22); box-shadow: 0 50px 110px -50px rgba(123,63,228,0.7); background: #05060d; }
.ind-hero-art img { display: block; width: 100%; height: auto; }
.ind-chan-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.chan-pill, .chan-badge { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; font: 800 12.5px/1 "DM Sans", sans-serif; letter-spacing: 0.04em; color: #0b0b14; }
.ch-sms { background: #38BDF8; } .ch-wa { background: #25D366; } .ch-rcs { background: #C4B5FD; } .ch-email { background: #FBBF24; } .ch-voice, .ch-ussd { background: #FB7185; }
.chan-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; max-width: 1140px; margin: 0 auto 90px; }
.chan-block:nth-of-type(even) .chan-copy { order: 2; }
.chan-copy h3 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; margin: 14px 0 12px; letter-spacing: -0.01em; }
.chan-copy p { color: #b3bcd2; font-size: 16.5px; line-height: 1.7; margin: 0 0 16px; }
.chan-uses { list-style: none; margin: 0; padding: 0; }
.chan-uses li { position: relative; padding: 8px 0 8px 30px; color: #dfe4f2; font-size: 15.5px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.chan-uses li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid #34D399; border-bottom: 2.5px solid #34D399; transform: rotate(-45deg); }
.chan-media { border-radius: 22px; overflow: hidden; border: 1px solid rgba(160,150,255,0.18); background: #05060d; box-shadow: 0 40px 90px -45px rgba(62,99,221,0.6); }
.chan-media img { display: block; width: 100%; height: auto; }
.svcp-steps .chan-badge { margin: 0 0 10px; padding: 5px 11px; font-size: 11.5px; }
@media (max-width: 960px) {
  .ind-hero { padding: 120px 0 50px; } .ind-hero-inner, .chan-block { grid-template-columns: 1fr; gap: 30px; }
  .chan-block:nth-of-type(even) .chan-copy { order: 0; } .chan-block { margin-bottom: 60px; }
}
/* base card style for pages that do not load services.css (industry pages); services.css overrides it where loaded */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-card { position: relative; padding: 28px 26px; border-radius: 18px; background: #0b0d18; border: 1px solid rgba(255,255,255,0.08); }
.svc-card h3 { color: #fff; font-size: 21px; margin: 0 0 10px; } .svc-card p { color: #a9b2c8; font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
.svc-card-link { color: #8fb0ff; font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }
/* FAQ wrapper: industries.css set max-width:800px, which replaced the container's max-width:100%
   and made the FAQ 800px wide on phones (cut off on the right). Cap it at whichever is smaller. */
.silvertech-container.industry-faq-wrap { max-width: min(800px, 100%); }

/* ---- country pages: the three disciplines, given equal weight ---- */
.lp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lp-pillar { position: relative; padding: 28px 26px 24px; border-radius: 20px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); display: flex; flex-direction: column; }
.lp-pillar::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pc, #38BDF8); }
.lp-pillar-msg { --pc: linear-gradient(90deg, #38BDF8, #3E63DD); } .lp-pillar-si { --pc: linear-gradient(90deg, #C4B5FD, #7B3FE4); } .lp-pillar-ps { --pc: linear-gradient(90deg, #FBBF24, #FB7185); }
.lp-pillar-k { font: 700 12px/1 "DM Sans", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb0d9; }
.lp-pillar-si .lp-pillar-k { color: #C4B5FD; } .lp-pillar-ps .lp-pillar-k { color: #FCD34D; } .lp-pillar-msg .lp-pillar-k { color: #7DD3FC; }
.lp-pillar h3 { color: #fff; font-size: 21px; margin: 12px 0 8px; } .lp-pillar p { color: #a9b3c9; font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.lp-pillar ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; flex: 1; }
.lp-pillar li { color: #d9def0; font-size: 14.5px; padding-left: 18px; position: relative; } .lp-pillar li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); }
.lp-pillar a { font-weight: 700; font-size: 14.5px; color: #fff; text-decoration: none; } .lp-pillar a:hover { text-decoration: underline; }
.lp-items { margin-top: 34px; }
.lp-items .svc-card-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .lp-pillars { grid-template-columns: 1fr; } }
/* heading levels raised for a clean outline (no skipped levels): keep each heading's original look */
.hx-from-h4 { font-size: 1.625em; line-height: 1.307; }
.hx-from-h5 { font-size: 1.375em; line-height: 1.364; }
.hx-from-h3 { font-size: 1.875em; line-height: 1.266; }
#post-nav .content-wrap h3 { font-size: 16px; line-height: 24px; margin: 0; }
#post-nav .content-wrap h3 a { color: #6b7b9c; } #post-nav .content-wrap h3:hover a { color: #3E63DD; }
.ps-industry-card h3 { color: #fff; font-size: 15px; margin: 0 0 8px; font-weight: 700; }
.fx-cap h2 { color: #fff; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; margin: 10px 0 12px; letter-spacing: -0.02em; }
/* country pages: links to neighbouring markets */
.lp-nearby-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.lp-nearby-link { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(160,150,255,0.28); background: rgba(255,255,255,0.03); color: #dbe2f5; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color 0.25s, background 0.25s, color 0.25s; }
.lp-nearby-link:hover, .lp-nearby-link:focus-visible { border-color: #8fb0ff; background: rgba(62,99,221,0.16); color: #fff; }