/* =========================================================
   BrandTelligence — Aigocy-faithful theme
   Light cream body • Inset dark hero card • Embossed pills/buttons
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================================
   §A · RESPONSIVE TOKENS (Phase 1)
   Mobile-first. Fluid type/space interpolating 320px → 1440px.
   Coexists with legacy tokens below; not yet consumed.
   ========================================================= */
:root {
  /* Anchors */
  --vw-min: 20rem;          /* 320px  */
  --vw-max: 90rem;          /* 1440px */
  --shell-max: 82.5rem;     /* 1320px main content cap   */
  --shell-wide: 90rem;      /* 1440px decorative max     */

  /* Fluid TYPE ramp (16→18 base, ratio min 1.2, max 1.25) */
  --fs--2: clamp(0.6944rem, 0.6713rem + 0.1155vw, 0.72rem);
  --fs--1: clamp(0.8333rem, 0.792rem + 0.2065vw, 0.9rem);
  --fs-0:  clamp(1rem,      0.95rem + 0.25vw,    1.125rem);
  --fs-1:  clamp(1.2rem,    1.12rem + 0.4vw,     1.4063rem);
  --fs-2:  clamp(1.44rem,   1.31rem + 0.65vw,    1.7578rem);
  --fs-3:  clamp(1.728rem,  1.526rem + 1.012vw,  2.1973rem);
  --fs-4:  clamp(2.0736rem, 1.766rem + 1.538vw,  2.7466rem);
  --fs-5:  clamp(2.4883rem, 2.025rem + 2.317vw,  3.4332rem);
  --fs-6:  clamp(2.986rem,  2.298rem + 3.44vw,   4.2915rem);
  --fs-7:  clamp(3.5832rem, 2.582rem + 5.006vw,  5.3644rem);

  /* Fluid SPACE ramp */
  --space-3xs: clamp(0.25rem,  0.2174rem + 0.163vw,  0.375rem);
  --space-2xs: clamp(0.5rem,   0.4348rem + 0.3261vw, 0.75rem);
  --space-xs:  clamp(0.75rem,  0.6522rem + 0.4891vw, 1.125rem);
  --space-s:   clamp(1rem,     0.8696rem + 0.6522vw, 1.5rem);
  --space-m:   clamp(1.5rem,   1.3043rem + 0.9783vw, 2.25rem);
  --space-l:   clamp(2rem,     1.7391rem + 1.3043vw, 3rem);
  --space-xl:  clamp(3rem,     2.6087rem + 1.9565vw, 4.5rem);
  --space-2xl: clamp(4rem,     3.4783rem + 2.6087vw, 6rem);
  --space-3xl: clamp(6rem,     5.2174rem + 3.913vw,  9rem);
  --space-4xl: clamp(8rem,     6.9565rem + 5.2174vw, 12rem);

  /* Breakpoint documentation (also exposed for JS via getComputedStyle) */
  --bp-sm:  30em;  /*  480px */
  --bp-md:  48em;  /*  768px */
  --bp-lg:  64em;  /* 1024px */
  --bp-xl:  80em;  /* 1280px */
  --bp-2xl: 90em;  /* 1440px */
  --bp-3xl: 120em; /* 1920px */
}

:root {
  /* Aigocy tokens — adapted with BrandTelligence brand */
  --white: #ffffff;
  --black: #000000;
  --primary: #09090b;
  --secondary: #71717a;
  --brand: #ee7e22;          /* BT orange (Aigocy uses #FD3A25 red) */
  --brand-2: #0d9499;        /* BT teal */
  --brand-3: #8b5cf6;        /* BT purple */
  --brand-deep: #c5641a;
  --brand-3-deep: #6d28d9;   /* deep purple */
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;
  --neutral-950: #09090b;
  --body: #edecec;
  --light-pill: #f5f5f5;

  --font: 'Urbanist', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --container: 1320px;
  --gutter: clamp(16px, 3vw, 40px);

  /* Embossed shadow stacks */
  --shadow-emboss-dark: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255,255,255,0.30) inset, 0px 2.77px 2.21px 0px rgba(0,0,0,0.12), 0px 6.65px 5.32px 0px rgba(0,0,0,0.13), 0px 12.52px 10.02px 0px rgba(0,0,0,0.14), 0px 22.34px 17.87px 0px rgba(0,0,0,0.14), 0px 41.78px 33.42px 0px rgba(0,0,0,0.15);
  --shadow-emboss-light: 0px -3px 0px 0px #e9e9e9 inset, 0px 1px 0px 0px rgba(255,255,255,0.7) inset, 0px 2.77px 2.21px 0px rgba(0,0,0,0.12), 0px 3px 3px 0px rgba(0,0,0,0.14);
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-0);       /* fluid 16→18 */
  line-height: 1.5;             /* unitless — scales with size */
  color: var(--primary);
  background-color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* Mono — clinical data voice */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Section chapter marker — replaces or sits above heading-sub */
.chapter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.chapter::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--brand);
}
.chapter b { color: var(--brand-deep); font-weight: 600; }
.box-black .chapter,
.section-hero .chapter { color: var(--neutral-400); }
.box-black .chapter b { color: var(--brand); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

/* ===== Container ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.flat-spacing { padding: clamp(80px, 9vw, 120px) 0; }
.flat-spacing.pt-0 { padding-top: 0; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.heading-section { margin-bottom: 48px; }
.heading-section.center { text-align: center; }
.heading-section.center .heading-sub,
.heading-section.center .heading-title { margin-left: auto; margin-right: auto; }

.heading-sub {
  display: inline-flex;
  position: relative;
  align-items: center;
  width: max-content;
  border-radius: 8px;
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 16px 7px 30px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), linear-gradient(0deg, #f5f5f5, #f5f5f5);
  box-shadow: var(--shadow-emboss-light);
  margin-bottom: 32px;
  letter-spacing: 0;
  text-transform: none;
}
.heading-sub::before {
  position: absolute;
  content: '';
  width: 6px; height: 6px;
  border-radius: 99px;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  background-color: var(--brand);
}

.heading-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-6);       /* fluid 47.8→68.7 */
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
}
.heading-title .accent {
  color: var(--brand-deep);
  -webkit-text-fill-color: var(--brand-deep);
  background: none;
  font-weight: 700;
}
.box-black .heading-title .accent,
.section-hero .heading-title .accent { color: var(--brand); -webkit-text-fill-color: var(--brand); }
@media (max-width: 767px) {
  .heading-title { font-size: 40px; line-height: 48px; }
  .heading-title br { display: none; }
}

/* Text gradients (Aigocy's exact values) */
.text-gradient-1 {
  background: linear-gradient(132.09deg, #43484d 11.15%, #292c2e 79.01%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 7px;     /* room for descenders (g/y/p) — line-height:1 clips them */
  margin-bottom: -7px;     /* cancel the padding so layout is unchanged */
}
.text-gradient-2 {
  background: linear-gradient(360deg, rgba(41,44,46,0) 0%, #292c2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-gradient-3 {
  background: linear-gradient(95.5deg, #61666a 1.91%, #292c2e 43.92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 7px;
  margin-bottom: -7px;
}

/* On dark backgrounds (box-black, hero) we need light gradients */
.box-black .heading-title,
.section-hero .title,
.section-contact .heading-title { color: var(--white); }
.box-black .text-gradient-1,
.section-hero .text-gradient-1,
.section-contact .text-gradient-1,
.box-black .heading-section .text-gradient-1 {
  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box-black .text-gradient-3,
.box-black .heading-section .text-gradient-3 {
  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box-black .heading-sub {
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.3);
  color: var(--brand);
}
.box-black .heading-sub::before { background: var(--brand); }

p { color: var(--neutral-600); font-size: 16px; line-height: 1.6; }
.box-black p, .section-hero p { color: var(--neutral-300); }
.text-white { color: var(--white); }
.text-brand { color: var(--brand); }
.text-secondary { color: var(--secondary); }
.text-neutral-400 { color: var(--neutral-400); }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.text-body-1 { font-size: 18px; line-height: 28px; }
.text-body-3 { font-size: 14px; line-height: 22px; }
.text-caption { font-size: 12px; letter-spacing: 0.04em; }
.mb-0 { margin-bottom: 0 !important; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }
.mb-80 { margin-bottom: 80px; }
.mb-24 { margin-bottom: 24px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }

/* ===== Buttons — Aigocy embossed style ===== */
.tf-btn,
.tf-btn-2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  border-radius: 99px;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  padding: 14px 24px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
.tf-btn {
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), linear-gradient(0deg, #272727, #272727);
  box-shadow: var(--shadow-emboss-dark), 0px 100px 80px 0px rgba(0,0,0,0.15);
}
.tf-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(238,126,34,0.45) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tf-btn:hover::before { transform: translateX(110%); }
.tf-btn:hover {
  background: radial-gradient(62.56% 62.56% at 50% -13%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%), linear-gradient(0deg, #272727, #272727);
}
.tf-btn::after {
  content: '→';
  font-size: 14px;
  display: inline-block;
  transition: transform 0.3s;
  position: relative;
}
.tf-btn:hover::after { transform: translateX(4px); }

.tf-btn-2 {
  color: var(--primary);
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), linear-gradient(0deg, #f5f5f5, #f5f5f5);
  box-shadow: var(--shadow-emboss-light);
}
.tf-btn-2:hover { color: var(--brand); }

.tf-btn.brand {
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0px -3px 0px 0px rgba(0,0,0,0.18) inset, 0px 1px 0px 0px rgba(255,255,255,0.4) inset, 0px 14px 34px 0px rgba(238,126,34,0.35), 0px 5px 8px 0px rgba(238,126,34,0.25);
}

.w-100 { width: 100%; }

/* ===== Header ===== */
.tf-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 99px;
  box-shadow: var(--shadow-emboss-light);
}
.logo-site {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
/* Real logo image (header). Fluid height keeps it tidy from mobile → desktop. */
.logo-img {
  display: block;
  height: clamp(30px, 4.2vw, 44px);
  width: auto;
}
/* Full wordmark (with tagline) on desktop; compact wordmark (no tagline) on
   mobile/tablet, where the inline nav + Get In Touch collapse into the menu. */
.logo-compact { display: none; }
.nav-cta-li { display: none; }
.logo-site .mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(238,126,34,0.4);
}
.logo-site .mark::before,
.logo-site .mark::after {
  content: '';
  position: absolute;
  background: var(--white);
  border-radius: 1px;
}
.logo-site .mark::before { top: 8px; bottom: 8px; left: 50%; width: 2.5px; transform: translateX(-50%); }
.logo-site .mark::after { left: 8px; right: 8px; top: 50%; height: 2.5px; transform: translateY(-50%); }
.logo-site .name { line-height: 1.1; display: flex; flex-direction: column; }
.logo-site .name span { color: var(--brand); }
.logo-site small {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-500);
  font-weight: 500;
  margin-top: 2px;
}

.nav-menu-main {
  display: none;            /* mobile: hidden, revealed via .is-open dropdown or ≥1025px row */
  gap: 28px;
  align-items: center;
  list-style: none;
}

/* Hamburger toggle — injected by main.js, shown only below the desktop breakpoint */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  margin-left: 4px;
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu-main .item-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  padding: 10px 4px 10px 12px;   /* extra left room for the accent line */
  position: relative;
  transition: color 0.25s ease;
}
/* Soft gradient that emanates from the line and fades to the right */
.nav-menu-main .item-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(238,126,34,0.22) 0%, rgba(238,126,34,0.08) 35%, transparent 80%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
/* Vertical accent line sitting just left of the item */
.nav-menu-main .item-link::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0.4);
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(238,126,34,0.6);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-menu-main .item-link:hover {
  color: var(--brand-deep);
}
.nav-menu-main .item-link:hover::before { opacity: 1; }
.nav-menu-main .item-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
/* Active item retains the hover treatment (gradient + vertical line + colour) */
.nav-menu-main .item-link.active { color: var(--brand-deep); }
.nav-menu-main .item-link.active::before { opacity: 1; }
.nav-menu-main .item-link.active::after {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

/* ===== HERO — inset rounded card ===== */
.section-hero {
  padding: 110px 8px 0;          /* mobile-first; desktop enhanced via min-width */
  min-height: 100vh;
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.section-hero .hero-image {
  position: absolute;
  inset: 110px 8px 0 8px;        /* mobile-first; desktop enhanced via min-width */
  border-radius: 24px;

  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(238,126,34,0.32) 0%, transparent 62%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(13,148,153,0.24) 0%, transparent 62%),
    linear-gradient(180deg, #18181b 0%, #0a0a12 100%);
  overflow: hidden;
}
/* Intelligence-Core composition: technical grid + accent lines + corner brackets */
.section-hero .hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* fine grid */
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    /* heavier accent grid every 5 cells */
    linear-gradient(rgba(238,126,34,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,153,0.10) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 25%, transparent 80%);
  pointer-events: none;
}
/* Hero overlay — positioning context that tracks the hero card automatically.
   Decorators inside use simple corner offsets (top:20px / right:20px etc),
   so any change to header height or section padding stays local. */
.hero-overlay {
  position: absolute;
  inset: 110px 8px 0 8px;     /* mobile-first; desktop enhanced via min-width */
  pointer-events: none;
  z-index: 2;
}

/* Corner brackets — curved to follow the hero card's 40px radius */
.hero-corner {
  position: absolute;
  width: 56px; height: 56px;
  border-style: solid;
  border-color: var(--brand);
  border-width: 0;
  opacity: 0.75;
}
.hero-corner.tl {
  top: 20px; left: 20px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  border-top-left-radius: 24px;
}
.hero-corner.tr {
  top: 20px; right: 20px;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  border-top-right-radius: 24px;
}
.hero-corner.bl {
  bottom: 20px; left: 20px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  border-bottom-left-radius: 24px;
}
.hero-corner.br {
  bottom: 20px; right: 20px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
  border-bottom-right-radius: 24px;
}

/* System-status labels — mono, technical metadata */
.hero-status {
  position: absolute;
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-400);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.hero-status .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34,197,94,0.5);
  animation: ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero-status.top-right { top: 32px; right: 44px; color: var(--neutral-300); }
.hero-status.top-left  { top: 32px; left: 44px;  color: var(--neutral-300); }

/* Ambient pulse nodes — connection points suggesting a networked system */
.hero-node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(238,126,34,0.7);
  animation: nodePulse 3s ease-in-out infinite;
}
.hero-node.teal {
  background: var(--brand-2);
  box-shadow: 0 0 12px rgba(13,148,153,0.7);
}
@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}
.hero-node.n1 { top: 28%; left: 22%; animation-delay: 0s; }
.hero-node.n2 { top: 32%; right: 26%; animation-delay: 0.7s; }
.hero-node.n3 { bottom: 32%; left: 30%; animation-delay: 1.4s; }
.hero-node.n4 { bottom: 36%; right: 24%; animation-delay: 2.1s; }

/* ===== Animated orbs — flow from cube center outward to each system bubble ===== */
.orb-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;        /* centering via margins — keeps the animation in pure pixels (avoids
                                   browser interpolation bug between % and calc(% + Npx) translates) */
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(238,126,34,0.85), 0 0 22px rgba(238,126,34,0.45);
  opacity: 0;
  will-change: transform, opacity;
}
.orb.teal {
  background: var(--brand-2);
  box-shadow: 0 0 10px rgba(13,148,153,0.85), 0 0 22px rgba(13,148,153,0.45);
}

/* ===== Orb destination mapping (Phase 4 — per-orb measured) =====
   Each orb gets its OWN --dx / --dy, set by JS from real bubble measurements.
   CSS fallbacks ensure orbs render reasonably if JS hasn't run yet. */

:root {
  /* Fallback when JS hasn't measured yet — approximate the desktop case */
  --orb-dx-l1: -380px; --orb-dy-l1: -96px;
  --orb-dx-l2: -380px; --orb-dy-l2: -32px;
  --orb-dx-l3: -380px; --orb-dy-l3:  32px;
  --orb-dx-l4: -380px; --orb-dy-l4:  96px;
  --orb-dx-r1:  380px; --orb-dy-r1: -96px;
  --orb-dx-r2:  380px; --orb-dy-r2: -32px;
  --orb-dx-r3:  380px; --orb-dy-r3:  32px;
  --orb-dx-r4:  380px; --orb-dy-r4:  96px;
}

/* Total cycle: 8s. Orb parks 3s at the bubble edge while a conic-gradient
   border sweeps around the bubble, then "releases" the orb back to the cube. */
.orb-l1 { animation: flowOrb 8s 0.0s  ease-in-out infinite; --dx: var(--orb-dx-l1); --dy: var(--orb-dy-l1); }
.orb-l2 { animation: flowOrb 8s 0.5s  ease-in-out infinite; --dx: var(--orb-dx-l2); --dy: var(--orb-dy-l2); }
.orb-l3 { animation: flowOrb 8s 1.0s  ease-in-out infinite; --dx: var(--orb-dx-l3); --dy: var(--orb-dy-l3); }
.orb-l4 { animation: flowOrb 8s 1.5s  ease-in-out infinite; --dx: var(--orb-dx-l4); --dy: var(--orb-dy-l4); }

.orb-r1 { animation: flowOrb 8s 0.25s ease-in-out infinite; --dx: var(--orb-dx-r1); --dy: var(--orb-dy-r1); }
.orb-r2 { animation: flowOrb 8s 0.75s ease-in-out infinite; --dx: var(--orb-dx-r2); --dy: var(--orb-dy-r2); }
.orb-r3 { animation: flowOrb 8s 1.25s ease-in-out infinite; --dx: var(--orb-dx-r3); --dy: var(--orb-dy-r3); }
.orb-r4 { animation: flowOrb 8s 1.75s ease-in-out infinite; --dx: var(--orb-dx-r4); --dy: var(--orb-dy-r4); }

/* Suspend orbs + cube animation per reduced-motion preference & stacked layout */
.cube-stage.orbs-suspended .orb-flow { display: none; }
.reduce-motion .orb,
.reduce-motion .hero-cube { animation: none !important; transform: none !important; }

/* Round trip with 3-second pause at the bubble edge.
   Timing breakdown (8s total):
     0–6%   → spawn at cube (0.48s)
     6–20%  → travel outward (1.12s)
    20–58%  → PAUSE at bubble edge (3.04s) — bubble border sweep runs here
    58–62%  → release pulse (0.32s)
    62–92%  → travel back to cube (2.4s)
    92–100% → fade out at cube (0.64s) */
/* Travel fast, park boldly. The eye reads parked orbs (bigger, brighter, longer)
   as the "destination", not the in-transit positions that flash briefly between. */
@keyframes flowOrb {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  6%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  20%  { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }       /* arrive — touch bubble at its size, no scale-up */
  58%  { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }       /* parked at bubble */
  62%  { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 1; }     /* brief release pulse before retreat */
  92%  { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0, 0) scale(0.4); opacity: 0; }
}

/* ===== Bubble border sweep — conic-gradient that revolves around the bubble during the orb's 3s pause =====
   Same 8s cycle and per-bubble delay as the corresponding orb. Sweep starts where the orb touches,
   makes one full revolution during the pause window (20–58%), then fades. */
@property --sweep-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Layer 1 — spinning conic gradient (inset:-100% extends well past the bubble; overflow:hidden on .sys-node clips it to the pill shape) */
.sys-node::before {
  content: '';
  position: absolute;
  inset: -100%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from var(--sweep-start, 90deg) at 50% 50%,
    transparent 0%,
    transparent 75%,
    var(--sweep-color, var(--brand)) 100%
  );
  opacity: 0;
  transform: rotate(0deg);
  filter: drop-shadow(0 0 6px var(--sweep-glow, rgba(238, 126, 34, 0.8)));
  animation: bubbleSweep 8s linear infinite;
}

/* Layer 2 — inner solid cover that masks the spinning gradient (only a 1px ring at the edge shows through) */
.sys-node::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s, border-color 0.3s;
}

@keyframes bubbleSweep {
  /* 0–18% — orb traveling out → gradient invisible */
  0%, 18%   { opacity: 0; transform: rotate(0deg); }
  /* 20% — orb arrives → gradient appears at orb position */
  20%       { opacity: 1; transform: rotate(0deg); }
  /* 20–58% — gradient revolves a full 360° during the 3-second pause */
  58%       { opacity: 1; transform: rotate(360deg); }
  /* 62–100% — orb released → gradient fades */
  62%, 100% { opacity: 0; transform: rotate(360deg); }
}

/* Per-bubble timing — match each bubble's animation-delay to its corresponding orb's delay */
.sys-tower.left  .sys-node:nth-child(1)::before { animation-delay: 0.0s; }
.sys-tower.left  .sys-node:nth-child(2)::before { animation-delay: 0.5s; }
.sys-tower.left  .sys-node:nth-child(3)::before { animation-delay: 1.0s; }
.sys-tower.left  .sys-node:nth-child(4)::before { animation-delay: 1.5s; }
.sys-tower.right .sys-node:nth-child(1)::before { animation-delay: 0.25s; }
.sys-tower.right .sys-node:nth-child(2)::before { animation-delay: 0.75s; }
.sys-tower.right .sys-node:nth-child(3)::before { animation-delay: 1.25s; }
.sys-tower.right .sys-node:nth-child(4)::before { animation-delay: 1.75s; }

/* Sweep color matches the orb (odd=orange, even=teal — same pattern as sys-dot) */
.sys-tower .sys-node:nth-child(2n+1) { --sweep-color: var(--brand);   --sweep-glow: rgba(238, 126, 34, 0.8); }
.sys-tower .sys-node:nth-child(2n)   { --sweep-color: var(--brand-2); --sweep-glow: rgba(13, 148, 153, 0.8); }

/* Sweep starts where the orb arrives:
   Left-tower bubbles → orb touches the RIGHT edge (90deg in conic terms)
   Right-tower bubbles → orb touches the LEFT edge (270deg) */
.sys-tower.left  .sys-node { --sweep-start: 90deg; }
.sys-tower.right .sys-node { --sweep-start: 270deg; }

/* Suspend sweep alongside orb system when stacked or reduced-motion */
.orbs-suspended .sys-node::before,
.reduce-motion  .sys-node::before { animation: none !important; opacity: 0 !important; }

@media (max-width: 64em) {   /* ≤1024px — match the cube-stage stacked layout */
  .orb-flow { display: none; }
}

/* ===== Cube stage — mobile-first, viewport-based at section level (Phase 8) ===== */
.cube-stage {
  display: grid;
  grid-template-columns: 1fr;          /* Mobile-first: stacked single column */
  gap: var(--space-m);
  align-items: center;
  margin: 64px 0 32px;
  position: relative;
}
/* Enhance to 3-col tower layout when viewport has comfortable room (~1100px+) */
@media (min-width: 64.0625em) {  /* 1025px — align with site-wide desktop breakpoint */
  .cube-stage {
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    gap: 32px;
  }
}

/* System tower — vertical stack of 4 nodes flanking the cube */
.sys-tower {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 240px;
  animation: heroIn 0.9s 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sys-tower.left { align-items: stretch; justify-self: start; }
.sys-tower.right { align-items: stretch; justify-self: end; }

/* Bubble — layered: spinning conic-gradient (::before) under inner solid mask (::after) */
.sys-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px 11px 13px;   /* +1px on each side creates the visible gradient ring */
  border-radius: 999px;
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--neutral-300);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: left;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;             /* new stacking context for the layered z-index */
  background: transparent;
  border: none;
}
.sys-tower.right .sys-node { flex-direction: row-reverse; text-align: right; }
.sys-node:hover { color: var(--white); transform: translateY(-2px); }
.sys-node:hover::after { background: rgba(28, 28, 32, 0.92); border-color: rgba(238, 126, 34, 0.3); }
.sys-node > * { position: relative; z-index: 2; }
.sys-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(238,126,34,0.7), 0 0 14px rgba(238,126,34,0.4);
  animation: ledPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.sys-dot.teal {
  background: var(--brand-2);
  box-shadow: 0 0 8px rgba(13,148,153,0.7), 0 0 14px rgba(13,148,153,0.4);
}
.sys-idx {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.sys-tower.right .sys-node:nth-child(even) .sys-idx,
.sys-tower.left .sys-node:nth-child(even) .sys-idx { color: var(--brand-2); }
.sys-label {
  color: var(--neutral-200);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  flex: 1;
}

@media (max-width: 64em) {   /* ≤1024px — match site-wide mobile/tablet breakpoint */
  .cube-stage { grid-template-columns: 1fr; gap: 24px; }
  .sys-tower { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .sys-tower.left, .sys-tower.right { justify-self: center; }
  .sys-tower.right .sys-node { flex-direction: row; text-align: left; }
}
@media (max-width: 640px) {
  .sys-tower .sys-node { font-size: 10px; padding: 8px 12px; }
  .sys-label { font-size: 11px; }
}

/* ===== Intelligence Core — central rotating 3D cube ===== */
.cube-mount {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;          /* keep vertical page-scroll on touch; drag is mouse/pen */
}
/* Interactive cube affordance — only when motion is allowed (drag is a no-op
   under reduced motion, so don't imply a grab handle there). */
@media (prefers-reduced-motion: no-preference) {
  .cube-mount { cursor: grab; }
  .cube-mount.dragging { cursor: grabbing; }
}
.hero-cube {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
  animation: cubeSpin 40s linear infinite;
  pointer-events: none;
  will-change: transform;
}
.cube-face {
  position: absolute;
  width: 280px; height: 280px;
  border: 1.5px solid rgba(238,126,34,0.55);
  background:
    linear-gradient(135deg, rgba(238,126,34,0.05) 0%, rgba(13,148,153,0.04) 100%);
  box-shadow:
    inset 0 0 36px rgba(238,126,34,0.15),
    inset 0 0 80px rgba(238,126,34,0.05),
    0 0 24px rgba(238,126,34,0.18);
}
/* Inner grid texture on each face — gives the "data surface" feel */
.cube-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Corner vertex dots on each face */
.cube-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 0, var(--brand) 0, var(--brand) 3px, transparent 3.5px),
    radial-gradient(circle at 100% 0, var(--brand) 0, var(--brand) 3px, transparent 3.5px),
    radial-gradient(circle at 0 100%, var(--brand) 0, var(--brand) 3px, transparent 3.5px),
    radial-gradient(circle at 100% 100%, var(--brand) 0, var(--brand) 3px, transparent 3.5px);
  pointer-events: none;
}
.cube-face.front  { transform: translateZ(140px); }
.cube-face.back   { transform: translateZ(-140px) rotateY(180deg); }
.cube-face.right  { transform: translateX(140px) rotateY(90deg);  border-color: rgba(13,148,153,0.55); box-shadow: inset 0 0 36px rgba(13,148,153,0.15), inset 0 0 80px rgba(13,148,153,0.05), 0 0 24px rgba(13,148,153,0.18); }
.cube-face.right::after { background: radial-gradient(circle at 0 0, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 100% 0, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 0 100%, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 100% 100%, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px); }
.cube-face.left   { transform: translateX(-140px) rotateY(-90deg); border-color: rgba(13,148,153,0.55); box-shadow: inset 0 0 36px rgba(13,148,153,0.15), inset 0 0 80px rgba(13,148,153,0.05), 0 0 24px rgba(13,148,153,0.18); }
.cube-face.left::after { background: radial-gradient(circle at 0 0, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 100% 0, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 0 100%, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px), radial-gradient(circle at 100% 100%, var(--brand-2) 0, var(--brand-2) 3px, transparent 3.5px); }
.cube-face.top    { transform: translateY(-140px) rotateX(90deg); }
.cube-face.bottom { transform: translateY(140px) rotateX(-90deg); }

/* Cube face content — capability label, centered */
.cube-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  z-index: 2;
  pointer-events: none;
}
.cube-idx {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand);
  text-transform: uppercase;
}
.cube-face.right .cube-idx,
.cube-face.left .cube-idx,
.cube-face.bottom .cube-idx { color: var(--brand-2); }
.cube-label {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.cube-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--neutral-400);
  text-transform: uppercase;
  margin-top: 4px;
}

@keyframes cubeSpin {
  /* Y swivels continuously left → right. X tilts forward to expose top (25%) and back to expose bottom (75%). */
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  25%  { transform: rotateX(-60deg) rotateY(90deg); }   /* top face comes into view */
  50%  { transform: rotateX(-20deg) rotateY(180deg); }
  75%  { transform: rotateX(28deg)  rotateY(270deg); }  /* bottom face comes into view */
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* Bright glow halo behind the cube */
.hero-cube::before {
  content: '';
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle, rgba(238,126,34,0.22) 0%, rgba(13,148,153,0.12) 35%, transparent 65%);
  filter: blur(20px);
  z-index: -1;
}

@media (max-width: 1024px) {
  .hero-cube { width: 200px; height: 200px; margin-left: -100px; }
  .cube-face { width: 200px; height: 200px; }
  .cube-face.front  { transform: translateZ(100px); }
  .cube-face.back   { transform: translateZ(-100px) rotateY(180deg); }
  .cube-face.right  { transform: translateX(100px) rotateY(90deg); }
  .cube-face.left   { transform: translateX(-100px) rotateY(-90deg); }
  .cube-face.top    { transform: translateY(-100px) rotateX(90deg); }
  .cube-face.bottom { transform: translateY(100px) rotateX(-90deg); }
}
@media (max-width: 640px) {
  /* Phones: show the cube (previously hidden), centred and sized to fit the column.
     Self-contained so it overrides the ≤1024px tablet sizing + margin-left hack. */
  .cube-mount { width: 100%; height: 240px; margin: 0 auto; }
  .hero-cube { width: 180px; height: 180px; margin-left: 0; }
  .cube-face { width: 180px; height: 180px; }
  .cube-face.front  { transform: translateZ(90px); }
  .cube-face.back   { transform: translateZ(-90px) rotateY(180deg); }
  .cube-face.right  { transform: translateX(90px) rotateY(90deg); }
  .cube-face.left   { transform: translateX(-90px) rotateY(-90deg); }
  .cube-face.top    { transform: translateY(-90px) rotateX(90deg); }
  .cube-face.bottom { transform: translateY(90px) rotateX(-90deg); }
}

@media (max-width: 1024px) {
  .hero-status { font-size: 9px; }
  .hero-status.top-right { right: 20px; top: 24px; }
  .hero-status.top-left  { left: 20px;  top: 24px; }
  .hero-corner.tl, .hero-corner.tr { top: 16px; }
  .hero-corner.bl, .hero-corner.br { bottom: 16px; }
  .hero-corner.tl, .hero-corner.bl { left: 16px; }
  .hero-corner.tr, .hero-corner.br { right: 16px; }
}
@media (max-width: 640px) {
  .hero-corner, .hero-status, .hero-node { display: none; }
}
.section-hero .container {
  position: relative;
  z-index: 2;
}
.section-hero .content-wrap {
  padding: 70px 0 56px;
  text-align: center;
  position: relative;
}
/* Staggered hero entrance */
.section-hero .sub { animation: heroIn 0.9s 0s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.section-hero .title .title1 { animation: heroIn 0.9s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.section-hero .title .title2 { animation: heroIn 0.9s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.section-hero .content-wrap .text { animation: heroIn 0.9s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.section-hero .bot-btns { animation: heroIn 0.9s 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scroll-more { animation: heroIn 0.9s 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-float { animation: floatIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both, floatY 6s 1.2s ease-in-out infinite; }
.hero-float.pos-1 { animation-delay: 0.5s, 1.5s; }
.hero-float.pos-2 { animation-delay: 0.65s, 1.65s; }
.hero-float.pos-3 { animation-delay: 0.8s, 1.8s; }
.hero-float.pos-4 { animation-delay: 0.95s, 1.95s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(40px) scale(0.85); }
  to { opacity: 0.95; transform: translateY(0) scale(1); }
}

/* Floating tool icons around hero */
.hero-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Floater — bold brand surfaces, sharp icons, two-tone (orange/teal alternating). */
.hero-float {
  position: absolute;
  width: 84px; height: 84px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  animation: floatY 6s ease-in-out infinite;
  isolation: isolate;
}
.hero-float .icon-svg {
  width: 38px; height: 38px;
  color: var(--white);
  stroke-width: 2.2;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Orange variant (default for pos-1 and pos-3) */
.hero-float.accent,
.hero-float:not(.teal) {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(155deg, #ff9438 0%, #ee7e22 45%, #c5641a 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -2px 0 rgba(0,0,0,0.15) inset,
    0 18px 36px -10px rgba(238,126,34,0.55),
    0 8px 16px -4px rgba(238,126,34,0.4),
    0 4px 8px -2px rgba(0,0,0,0.25);
}

/* Teal variant */
.hero-float.teal {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(155deg, #14b8bd 0%, #0d9499 45%, #0a6e72 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -2px 0 rgba(0,0,0,0.15) inset,
    0 18px 36px -10px rgba(13,148,153,0.55),
    0 8px 16px -4px rgba(13,148,153,0.4),
    0 4px 8px -2px rgba(0,0,0,0.25);
}

/* Crisp highlight rim */
.hero-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}
.hero-float .icon-svg { width: 32px; height: 32px; color: var(--white); }
/* 4 corner floaters only — all sharp, all opaque, all carry a glow in their own color */
.hero-float.pos-1 { top: 16%; left: 8%; }
.hero-float.pos-2 { top: 16%; right: 10%; }
.hero-float.pos-3 { bottom: 22%; left: 6%; }
.hero-float.pos-4 { bottom: 18%; right: 6%; }
.hero-float.pos-5,
.hero-float.pos-6 { display: none; }
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--rot, -8deg)); }
  50% { transform: translateY(-14px) rotate(var(--rot, -8deg)); }
}
.hero-float.pos-1 { --rot: -8deg; }
.hero-float.pos-2 { --rot: 6deg; }
.hero-float.pos-3 { --rot: 4deg; }
.hero-float.pos-4 { --rot: -6deg; }
.hero-float.pos-5 { --rot: 10deg; }
.hero-float.pos-6 { --rot: -10deg; }
@media (max-width: 1024px) {
  .hero-float.pos-5, .hero-float.pos-6 { display: none; }
  .hero-float { width: 56px; height: 56px; font-size: 17px; }
}
@media (max-width: 640px) {
  .hero-floaters { display: none; }
}
.section-hero .content-wrap .sub {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 6px 16px;
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  background: linear-gradient(0deg, #f5f5f5, #f5f5f5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  box-shadow: var(--shadow-emboss-light);
  margin: 0 auto 24px;
}
.section-hero .content-wrap .sub svg { width: 16px; height: 16px; }
.section-hero .content-wrap .sub svg path { fill: var(--brand); }

.section-hero .title {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-7);       /* fluid 57.3→85.8 */
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 33px;
}
.section-hero .title .accent {
  color: var(--brand);
  font-weight: 700;
}
.section-hero .title .title1 { display: block; }
.section-hero .title .title2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 13px;
  flex-wrap: wrap;
}
/* Hero gradient text override — line 1 fades subtly, line 2 stays punchy */
/* Stronger override for hero gradient-1 — keep "Into Innovation" punchy */
.section-hero .title .text-gradient-1 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Second line is the value prop — give it full punch */
.section-hero .title .title2 .text-gradient-1 {
  background: #ffffff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
.title-icon {
  display: inline-flex;
  width: clamp(200px, 22vw, 255px);
  height: clamp(60px, 7vw, 80px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0px 3.44px 5.57px 0px rgba(0,0,0,0.09),
    0px 22.91px 37.08px 0px rgba(238,126,34,0.16),
    0px 76px 123px 0px rgba(238,126,34,0.05),
    0px 5.05px 8.18px 0px rgba(238,126,34,0.10),
    0px 16.98px 27.47px 0px rgba(238,126,34,0.05),
    0px 56px 83px 0px rgba(238,126,34,0.25),
    0px 14px 34px 0px rgba(238,126,34,0.25),
    0px 1px 2px 0px rgba(238,126,34,0.4);
}
.title-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
}
.title-icon::after {
  content: '⊕';
  font-family: var(--font);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--white);
  font-weight: 300;
  position: relative;
  z-index: 1;
}

.section-hero .content-wrap .text {
  max-width: 920px;
  margin: 56px auto 32px;
  font-size: 17px;
  color: var(--neutral-300);
  line-height: 1.6;
  text-wrap: balance;
}
@media (min-width: 64.0625em) {
  /* The 3D cube visually overflows its layout box, so give it real breathing
     room: push it down off the heading, and drop the paragraph further below it
     (into the band where the CTAs used to sit). */
  .cube-stage { margin-top: 130px; }
  .section-hero .content-wrap .text { margin-top: 170px; }
}
.bot-btns {
  display: inline-flex;
  gap: 11px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.section-hero .scroll-more {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 28px;
  width: 320px;
  height: 56px;
  background-color: var(--body);
  border-radius: 40px 40px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  z-index: 3;
}
.section-hero .scroll-more .ic-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 32px;
  border-radius: 99px;
  border: 1px solid var(--neutral-300);
  color: var(--brand);
  font-size: 14px;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ===== ABOUT SECTION ===== */
.section-about-us {
  background: var(--body);
  padding: clamp(80px, 9vw, 120px) 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1.3fr 1fr via min-width */
  gap: 24px;
}
.col-left {
  position: relative;
  min-height: 460px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 80% 80%, rgba(238,126,34,0.25), transparent 55%),
    radial-gradient(circle at 20% 20%, rgba(13,148,153,0.2), transparent 55%),
    #18181b;
  padding: 32px;                /* mobile-first; desktop: 48px via min-width */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
}
.col-left .position-relative { position: relative; z-index: 5; }
.col-left .sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 7px 14px;
  border-radius: 99px;
  margin-bottom: 24px;
}
.col-left .sub .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e;
}
.col-left .title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 28px;
  max-width: 18ch;
  line-height: 1.1;
}
.col-left .title .text-brand { color: var(--brand); }
/* Canvas-based dotted globe — fully contained, anchored lower-right of the card */
.col-left .globe {
  position: absolute;
  top: 60%;
  right: 4px;
  transform: translateY(-50%);
  width: 220px; height: 220px;   /* mobile-first; desktop enhanced via min-width */
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Keep the text content clear of the globe.
   `.position-relative` stays at 62% so the heading wraps as originally designed.
   On desktop we tighten ONLY the paragraph so it ends before the globe begins.
   Math: paragraph 100% == position-relative width == 62% of col-left content
         → col-left content = (100% / 0.62)
         → reserve 320px for globe (340 width + 8 offset − 48 padding + 20 breathing). */
.col-left .position-relative { max-width: 62%; }
@media (min-width: 64.0625em) {
  .col-left .position-relative p { max-width: calc(100% / 0.62 - 320px); }
}

/* ===== DUAL-HUB OPERATIONAL BANNERS (about-section, right column) =====
   Two "station readout" panels that extend the hero's mission-control
   language (status bars, mono tags, LED dots). Each office = an operational
   hub: monogram, region, live timezone, coordinate ticker, capability list.
   South Africa = brand orange; Malaysia = brand teal (mirrors globe glows). */
.hub-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.hub-card {
  --hub: var(--brand);          /* per-card accent */
  --hub-deep: #b95e12;
  position: relative;
  flex: 1;
  background: var(--white);
  border-radius: 24px;
  padding: 26px 28px 24px 34px; /* extra left for the spine */
  box-shadow: 0 2px 0 var(--neutral-200) inset, 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),
              box-shadow .4s ease, opacity .8s cubic-bezier(.2,.8,.2,1);
}
.hub-card.hub-my { --hub: var(--brand-2); --hub-deep: #0a6b6f; }

/* faint accent corner-glow */
.hub-card::after {
  content: "";
  position: absolute;
  top: -45%; right: -18%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--hub) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--hub) 60%, transparent),
              0 2px 0 var(--neutral-200) inset;
}

/* left accent spine — grows on hover */
.hub-spine {
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--hub), var(--hub-deep));
  transition: top .4s ease, bottom .4s ease;
}
.hub-card:hover .hub-spine { top: 0; bottom: 0; }

/* header */
.hub-head {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: start;
}
.hub-mono {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .03em;
  color: var(--white);
  background: linear-gradient(135deg, var(--hub), var(--hub-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),
              0 8px 16px -8px color-mix(in srgb, var(--hub) 75%, transparent);
}
.hub-id { min-width: 0; }
.hub-region {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hub);
  margin-bottom: 4px;
}
.hub-country {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.hub-city {
  font-size: 13px;
  color: var(--neutral-500);
  font-weight: 600;
  margin-top: 3px;
}
.hub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--neutral-500);
  background: var(--body);
  border-radius: 99px;
  padding: 5px 9px;
  white-space: nowrap;
}
.hub-led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: hubPulse 2.4s infinite;
}
@keyframes hubPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* operational coordinate ticker */
.hub-ticker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--neutral-500);
  margin: 16px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--neutral-200);
}

/* capability list */
.hub-values { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.hub-values li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}
.hub-values strong { color: var(--hub); font-weight: 700; }
.hub-ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--hub) 22%, transparent);
  box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--hub) 45%, transparent);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.hub-ico svg { width: 24px; height: 24px; display: block; }
/* Icons8-style duotone glyphs: pale "glass" fill + saturated brand outline
   + mid-tone highlight. Tones derive from --hub (set per hub card / per
   capability card); falls back to --brand anywhere --hub isn't defined. */
.duo-fill   { fill: color-mix(in srgb, var(--hub, var(--brand)) 15%, #fff); }
.duo-mid    { fill: color-mix(in srgb, var(--hub, var(--brand)) 50%, #fff); }
.duo-key    { fill: var(--hub, var(--brand)); }
.duo-stroke {
  fill: none;
  stroke: var(--hub, var(--brand));
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-card:hover .hub-ico {
  border-color: color-mix(in srgb, var(--hub) 40%, transparent);
  box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--hub) 55%, transparent);
}
.hub-values li:hover .hub-ico { transform: translateY(-2px) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .hub-led { animation: none; }
  .hub-card, .hub-spine, .hub-ico { transition: none; }
}

/* ===== PARTNERS MARQUEE ===== */
/* ===== CAPABILITY WORD-SOUP (replaces the partners marquee) =====
   Three keyword rows scroll in alternating directions — a "what we do"
   tag-cloud that signals BrandTelligence's full universe of capability.
   Keywords are real text (SEO); the loop clone is added by JS (wordSoup in
   main.js) and aria-hidden, so it degrades to a static, readable list. */
.section-partner {
  background: var(--body);
  padding: 30px 0 60px;
}
.partner-wrap {                 /* white rounded card shell */
  background: var(--white);
  border-radius: 24px;
  padding: 32px;
}
.soup-wrap { text-align: center; padding: 40px 28px; overflow: hidden; }

.soup-head { max-width: 62ch; margin: 0 auto 30px; }
.soup-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 14px;
}
.soup-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 10px #22c55e;
}
.soup-title {
  font-family: var(--font);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--primary);
}
.soup-title .accent { color: var(--brand); }
.soup-sub {
  margin: 12px auto 0;
  max-width: 56ch;
  font-size: 15px; line-height: 1.55; color: var(--neutral-600);
}

/* rows */
.word-soup { display: flex; flex-direction: column; gap: 14px; }
.soup-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.soup-track { display: flex; width: max-content; }
.soup-track.is-ready { animation: soupScroll var(--dur, 46s) linear infinite; }
.soup-track.rev.is-ready { animation-direction: reverse; }
.word-soup:hover .soup-track.is-ready { animation-play-state: paused; }
.soup-set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes soupScroll { to { transform: translateX(-50%); } }

/* word chips */
.soup-word {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 99px;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  letter-spacing: -.01em; white-space: nowrap; flex: none;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
}
.soup-word .d { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.soup-word.t .d { background: var(--brand-2); }
.soup-word.k .d { background: var(--primary); }
.soup-word.lg { font-size: 18px; padding: 11px 22px; }
.soup-word.sm { font-size: 13px; padding: 7px 14px; color: var(--neutral-500); }
.soup-word.sm .d { width: 6px; height: 6px; }
/* filled "anchor" words — the focal points of the soup */
.soup-word.fill { background: var(--brand); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px var(--brand); }
.soup-word.fill .d { background: rgba(255,255,255,.9); }
.soup-word.fill.t { background: var(--brand-2); box-shadow: 0 6px 16px -8px var(--brand-2); }
.soup-word.fill.k { background: var(--primary); box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  .soup-track.is-ready { animation: none; }
}

/* ===== BOX-WHITE (white card wrapper) ===== */
.box-white {
  background: var(--white);
  border-radius: 24px;          /* mobile-first; desktop: 40px via min-width */
  margin: 0 8px;                /* mobile-first; desktop: 0 16px via min-width */
  position: relative;
  z-index: 2;
}

/* ===== SERVICES (accordion) ===== */
.section-services .row-services {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1.3fr via min-width */
  gap: 48px;
  align-items: start;
}
.section-services .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--neutral-600);
  margin-top: 24px;
  max-width: 38ch;
}
.accordion-faq_list {
  display: flex;
  flex-direction: column;
}
.accordion-faq_item {
  border-bottom: 1px solid var(--neutral-200);
}
.accordion-faq_item:first-child { border-top: 1px solid var(--neutral-200); }
.accordion-action {
  /* Reset native button defaults so styling stays identical when promoted to <button> */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
}
.accordion-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: 6px;
}
.accordion-asked-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.accordion-title {
  font-family: var(--font);
  font-size: var(--fs-3);       /* fluid 27.6→35.2 */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--primary);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color 0.3s;
}
.accordion-title .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  font-feature-settings: "ss01", "tnum";
  white-space: nowrap;          /* keep "/ 0N" on one line… */
  flex: none;                   /* …and don't let flex squeeze it when the title wraps */
  padding-left: 16px;           /* breathing room from a wrapped title */
}
.accordion-title .accent {
  color: var(--brand-deep);
  font-weight: 700;
}
.accordion-action::after {
  content: '+';
  font-family: var(--font);
  font-size: 28px;
  font-weight: 300;
  color: var(--primary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.accordion-action.active::after { transform: rotate(45deg); color: var(--brand); }
.accordion-action.active .accordion-title { color: var(--brand); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion-content.show { max-height: 400px; }
.accordion-content-inner { padding: 0 0 28px; }
.accordion-content .text {
  font-size: 15px;
  color: var(--neutral-600);
  margin-bottom: 20px;
  max-width: 56ch;
}
.list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags-item {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  background: var(--light-pill);
  border-radius: 99px;
  color: var(--primary);
  box-shadow: var(--shadow-emboss-light);
  transition: color 0.2s;
}
.tags-item:hover { color: var(--brand); }

/* ===== FEATURED WORKS ===== */
.section-featured-works .heading-section { text-align: center; margin-bottom: 60px; }
.featured-works-list {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: repeat(2, 1fr) via min-width */
  gap: 24px;
}
.featured-works-item {
  background: var(--neutral-100);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.featured-works-item:hover { transform: translateY(-6px); box-shadow: 0 20px 60px -20px rgba(0,0,0,0.15); }
.featured-works-item .image {
  aspect-ratio: 16 / 11;
  /* Dark "Aether" stage so the rotating wireframe reads clearly. The accent
     glow is tinted with the card's --hub (orange / teal). */
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hub, var(--brand)) 32%, transparent), transparent 62%),
    #0a0a12;
  position: relative;
  overflow: hidden;
}
.featured-works-item .image .grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
}
.featured-works-item .image .symbol {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: clamp(120px, 16vw, 220px);
  font-weight: 200;
  color: rgba(9,9,11,0.1);
  line-height: 1;
}
/* ── Case-study thumbnails: CSS-only rotating wireframe objects on the dark
      Aether stage. Each object is MODELLED to match its use case; edges tinted
      with the card --hub. Dependency-free take on the rotating-wireframe look. ── */
.featured-works-item .image .symbol { font-size: 0; }   /* retire the old glyph sizing */
.wf-stage {
  width: 104px; height: 104px;
  perspective: 360px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.featured-works-item:hover .wf-stage { transform: scale(1.08); }
.wf {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: wfSway var(--wf-dur, 12s) ease-in-out infinite;   /* one shared rotation */
}

/* shared wireframe parts: .e = bordered shape, .bar = solid line, .core = node */
.wf .e {
  position: absolute;
  border: 1.5px solid color-mix(in srgb, var(--hub, var(--brand)) 72%, transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--hub, var(--brand)) 28%, transparent);
}
.wf .bar {
  position: absolute; border-radius: 2px;
  background: color-mix(in srgb, var(--hub, var(--brand)) 80%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--hub, var(--brand)) 30%, transparent);
}
.wf .core {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: color-mix(in srgb, var(--hub, var(--brand)) 85%, #fff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--hub, var(--brand)) 80%, transparent);
}

/* RIS — a HUMAN CHEST / RIBCAGE (chest radiograph): SVG wireframe ribcage that
   breathes while a CT scan-line sweeps down it, with a gentle 3D tilt for depth.
   (A true volumetric rotating chest would need a 3D model + Three.js/WebGL.) */
.wf-chest {
  width: 96px; height: 96px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hub, var(--brand)) 40%, transparent));
  /* no swivel — a chest X-ray reads best front-on; it only breathes + is scanned */
}
.wf-chest path, .wf-chest line, .wf-chest rect {
  fill: none;
  stroke: color-mix(in srgb, var(--hub, var(--brand)) 88%, transparent);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.wf-chest .cage { transform-box: fill-box; transform-origin: 50% 62%; animation: chBreathe 4s ease-in-out infinite; }
.wf-chest .ch-scan { stroke: #fff; stroke-width: 1.4; opacity: 0; animation: chScan 3s ease-in-out infinite; }
@keyframes chBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes chScan    { 0% { transform: translateY(16px); opacity: 0; } 12% { opacity: .85; } 88% { opacity: .85; } 100% { transform: translateY(82px); opacity: 0; } }

/* ERP — a MODULAR PLATFORM: one unified cube, faces gridded into modules */
.wf-cube .e {
  width: 60px; height: 60px; top: 22px; left: 22px;
  background-color: color-mix(in srgb, var(--hub, var(--brand)) 6%, transparent);
  background-image:
    linear-gradient(color-mix(in srgb, var(--hub, var(--brand)) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hub, var(--brand)) 16%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.wf-cube .fx { transform: translateZ(30px); }
.wf-cube .bx { transform: rotateY(180deg) translateZ(30px); }
.wf-cube .rt { transform: rotateY(90deg)  translateZ(30px); }
.wf-cube .lf { transform: rotateY(-90deg) translateZ(30px); }
.wf-cube .tp { transform: rotateX(90deg)  translateZ(30px); }
.wf-cube .bm { transform: rotateX(-90deg) translateZ(30px); }
/* packing tape: a sealed seam down the top, wrapping over the front & back edges */
.wf-cube .tape, .wf-cube .tape-f, .wf-cube .tape-b {
  position: absolute; left: 44px; width: 16px;
  background: color-mix(in srgb, var(--hub, var(--brand)) 22%, transparent);
  border-left: 1.5px solid color-mix(in srgb, var(--hub, var(--brand)) 82%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--hub, var(--brand)) 82%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--hub, var(--brand)) 28%, transparent);
}
.wf-cube .tape   { top: 22px; height: 60px; transform: rotateX(90deg) translateZ(31px); }   /* top seam, front→back */
.wf-cube .tape-f { top: 22px; height: 15px; transform: translateZ(31px); }                   /* wraps onto front edge */
.wf-cube .tape-b { top: 22px; height: 15px; transform: rotateY(180deg) translateZ(31px); }   /* wraps onto back edge */

/* vCard — a DIGITAL BUSINESS CARD: thin two-sided plane + avatar + contact lines */
.wf-card .cf { width: 84px; height: 52px; left: 10px; top: 26px; border-radius: 6px; background: color-mix(in srgb, var(--hub, var(--brand)) 7%, transparent); }
.wf-card .front { transform: translateZ(3px); }
.wf-card .back  { transform: translateZ(-3px); }
.wf-card .av { width: 16px; height: 16px; left: 20px; top: 34px; border-radius: 4px; transform: translateZ(3.5px); }
.wf-card .l1 { width: 34px; height: 2px; left: 42px; top: 38px; transform: translateZ(3.5px); }
.wf-card .l2 { width: 26px; height: 2px; left: 42px; top: 46px; transform: translateZ(3.5px); }

/* Ad Space — a BILLBOARD: display panel raised on legs (out-of-home signage) */
.wf-board .screen { width: 80px; height: 42px; left: 12px; top: 12px; border-radius: 5px; background: color-mix(in srgb, var(--hub, var(--brand)) 7%, transparent); }
.wf-board .inner  { width: 60px; height: 26px; left: 22px; top: 20px; border-radius: 3px; opacity: .55; }
.wf-board .leg  { width: 2px; height: 22px; top: 54px; }
.wf-board .lL { left: 40px; }
.wf-board .lR { left: 62px; }
.wf-board .base { width: 40px; height: 2px; left: 32px; top: 76px; }

/* Test & Defect Tracking — a CLIPBOARD / checklist (QA tracking) */
.wf-clip .bd { width: 60px; height: 78px; left: 22px; top: 13px; border-radius: 8px; background: color-mix(in srgb, var(--hub, var(--brand)) 6%, transparent); }
.wf-clip .front { transform: translateZ(4px); }
.wf-clip .back  { transform: translateZ(-4px); }
.wf-clip .clip  { width: 26px; height: 9px; left: 39px; top: 9px; border-radius: 3px; transform: translateZ(4.5px); }
.wf-clip .chk   { width: 9px; height: 9px; border-radius: 2px; left: 31px; transform: translateZ(4.5px); }
.wf-clip .c1 { top: 30px; } .wf-clip .c2 { top: 47px; } .wf-clip .c3 { top: 64px; }
.wf-clip .chk.on { background: color-mix(in srgb, var(--hub, var(--brand)) 70%, transparent); }
.wf-clip .row { width: 24px; height: 3px; left: 45px; border-radius: 2px; transform: translateZ(4.5px); }
.wf-clip .r1 { top: 33px; } .wf-clip .r2 { top: 50px; } .wf-clip .r3 { top: 67px; }

/* Digital Stamp Card — a LOYALTY CARD with a stamp grid */
.wf-stamp .cd { width: 84px; height: 54px; left: 10px; top: 25px; border-radius: 7px; background: color-mix(in srgb, var(--hub, var(--brand)) 7%, transparent); }
.wf-stamp .front { transform: translateZ(3px); }
.wf-stamp .back  { transform: translateZ(-3px); }
.wf-stamp .st { width: 11px; height: 11px; border-radius: 50%; transform: translateZ(3.6px); }
.wf-stamp .s1 { left: 24px; top: 32px; } .wf-stamp .s2 { left: 46px; top: 32px; } .wf-stamp .s3 { left: 68px; top: 32px; }
.wf-stamp .s4 { left: 24px; top: 50px; } .wf-stamp .s5 { left: 46px; top: 50px; } .wf-stamp .s6 { left: 68px; top: 50px; }
.wf-stamp .st.on { background: color-mix(in srgb, var(--hub, var(--brand)) 65%, transparent); }

/* Locum Workforce — an ID BADGE on a lanyard (staffing) */
.wf-badge .bg { width: 54px; height: 72px; left: 25px; top: 18px; border-radius: 8px; background: color-mix(in srgb, var(--hub, var(--brand)) 6%, transparent); }
.wf-badge .front { transform: translateZ(4px); }
.wf-badge .back  { transform: translateZ(-4px); }
.wf-badge .clip { width: 20px; height: 5px; left: 42px; top: 14px; border-radius: 2px; transform: translateZ(4.5px); }
.wf-badge .av { width: 22px; height: 22px; border-radius: 50%; left: 41px; top: 30px; transform: translateZ(4.5px); }
.wf-badge .l1 { width: 32px; height: 3px; left: 36px; top: 58px; border-radius: 2px; transform: translateZ(4.5px); }
.wf-badge .l2 { width: 22px; height: 3px; left: 41px; top: 65px; border-radius: 2px; transform: translateZ(4.5px); }

/* Project Management Hub — a KANBAN BOARD (columns + task cards) */
.wf-kanban .bd { width: 86px; height: 60px; left: 9px; top: 22px; border-radius: 8px; background: color-mix(in srgb, var(--hub, var(--brand)) 6%, transparent); }
.wf-kanban .front { transform: translateZ(4px); }
.wf-kanban .back  { transform: translateZ(-4px); }
.wf-kanban .col { width: 1.5px; height: 46px; top: 29px; transform: translateZ(4.5px); }
.wf-kanban .d1 { left: 36px; } .wf-kanban .d2 { left: 62px; }
.wf-kanban .ct { width: 17px; height: 7px; border-radius: 2px; transform: translateZ(4.5px); }
.wf-kanban .k1 { left: 15px; top: 31px; } .wf-kanban .k2 { left: 15px; top: 42px; }
.wf-kanban .k3 { left: 41px; top: 31px; }
.wf-kanban .k4 { left: 67px; top: 31px; } .wf-kanban .k5 { left: 67px; top: 42px; }
.wf-kanban .ct.on { background: color-mix(in srgb, var(--hub, var(--brand)) 65%, transparent); }

/* the one shared rotation used by the case-study / solution objects */
@keyframes wfSway { 0%, 100% { transform: rotateX(-20deg) rotateY(-32deg); } 50% { transform: rotateX(-20deg) rotateY(32deg); } }
@media (prefers-reduced-motion: reduce) {
  .wf { animation: none !important; transform: rotateX(-20deg) rotateY(-26deg); }
  .wf-chest { transform: none; }
  .wf-chest .cage { animation: none; transform: none; }
  .wf-chest .ch-scan { animation: none; opacity: 0; }
  .wf-stage, .featured-works-item:hover .wf-stage { transition: none; transform: none; }
}

/* ── Reusable feature-icon micro-motion (services capability + about
      commitments). One focal element per icon; restrained, reduced-motion safe. ── */
.fx-pulse   { animation: fxPulse 2.6s ease-in-out infinite; }
.fx-draw    { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fxDraw 3.2s ease-in-out infinite; }
.fx-twinkle { transform-box: fill-box; transform-origin: center; animation: fxTwinkle 2.2s ease-in-out infinite; }
.fx-d2 { animation-delay: .5s; }
@keyframes fxPulse   { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fxDraw    { 0% { stroke-dashoffset: 40; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }
@keyframes fxTwinkle { 0%, 100% { opacity: .4; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .fx-pulse, .fx-draw, .fx-twinkle { animation: none; }
  .fx-pulse { opacity: 1; }
  .fx-draw { stroke-dashoffset: 0; }
  .fx-twinkle { opacity: 1; transform: none; }
}
.featured-works-item .view-link {
  position: absolute;
  top: 20px; right: 20px;
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.featured-works-item .content { padding: 32px; }
.featured-works-item .heading {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.15;
  color: var(--hub, var(--primary));   /* matches the card's object accent (falls back to ink) */
}
.grid-text {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-text .item .title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
}
.grid-text .item > div:not(.title) {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.4;
}

/* ===== PROCESS ===== */
.section-process .row-process {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.process-slide {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: repeat(3, 1fr) via min-width */
  gap: 16px;
}
.process-card {
  background: var(--neutral-100);
  border-radius: 24px;
  padding: 32px 24px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.process-card .icon-large {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%), linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-bottom: 20px;
  box-shadow: 0 8px 16px -4px rgba(238,126,34,0.4);
}
.process-card .icon-large svg { width: 24px; height: 24px; }
.process-card .title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--primary);
}
.process-card .text { color: var(--neutral-600); font-size: 14px; }
.process-card .bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-200);
}
.process-card .time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.process-card .number {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
}
.process-card .number .of { color: var(--neutral-400); }
/* "What you get" — the deliverable, set apart from "what we do" as a tinted panel.
   The content wrapper is a flex column so the panel can pin to the bottom of the
   card (just above the index line), aligning the panels across a row regardless
   of how long the "what we do" copy runs. */
.process-card > div:first-child { display: flex; flex-direction: column; flex: 1; }
.process-card .icon-large { flex: none; }   /* keep the 52px tile from flexing */
.process-card .text { margin-bottom: 16px; } /* min gap when copy is tall */
.process-card .get {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.process-card .get-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 5px;
}
.process-card .get-text {
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.process-card .bot { justify-content: flex-end; }   /* index only now (no duration) */
/* 5-stage process: 1 col (mobile) → 2 (tablet) → 3 (desktop) → 5 (wide). */
@media (min-width: 40em) {
  .process-slide { grid-template-columns: repeat(2, 1fr); }
}

/* ── Ambient "interface" motion on the process-stage icons (Aether-inspired:
      looping, restrained, with a hover lift). Honors prefers-reduced-motion. ── */
.section-process .process-card {
  transition: opacity .8s cubic-bezier(.2,.8,.2,1),
              transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease;
}
.section-process .process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.18);
}
.process-card .icon-large svg { overflow: visible; }

/* 01 · Discover — scan line sweeps the lens */
.process-card .pa-scan { stroke-width: 1.3; opacity: 0; animation: paScan 2.6s ease-in-out infinite; }
@keyframes paScan {
  0%, 100% { transform: translateY(-4.5px); opacity: 0; }
  50%      { transform: translateY(4.5px);  opacity: .9; }
}
/* 02 · Design — wireframe lines draw in */
.process-card .pa-draw { stroke-dasharray: 34; stroke-dashoffset: 34; animation: paDraw 3.2s ease-in-out infinite; }
@keyframes paDraw {
  0%       { stroke-dashoffset: 34; }
  45%, 60% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -34; }
}
/* 03 · Build — caret blinks */
.process-card .pa-caret { stroke-width: 1.6; animation: paBlink 1.1s steps(1, end) infinite; }
@keyframes paBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* 04 · Launch — plane drifts up-right, trail pulses */
.process-card .pa-plane { animation: paFly 2.8s ease-in-out infinite; }
@keyframes paFly { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } }
.process-card .pa-trail { stroke-width: 1.3; opacity: 0; animation: paTrail 2.8s ease-in-out infinite; }
@keyframes paTrail { 0%, 100% { opacity: 0; } 45% { opacity: .65; } }
/* 05 · Scale — bars grow */
.process-card .pa-bar { transform-box: fill-box; transform-origin: bottom; animation: paGrow 2.4s ease-in-out infinite; }
.process-card .pa-bar.b2 { animation-delay: .18s; }
.process-card .pa-bar.b3 { animation-delay: .36s; }
@keyframes paGrow { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
/* 06 · Support — sync arrows rotate continuously */
.process-card .pa-spin { transform-box: fill-box; transform-origin: center; animation: paSpin 7s linear infinite; }
@keyframes paSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .section-process .process-card { transition: none; }
  .process-card .pa-scan,
  .process-card .pa-draw,
  .process-card .pa-caret,
  .process-card .pa-plane,
  .process-card .pa-trail,
  .process-card .pa-spin,
  .process-card .pa-bar { animation: none; }
  .process-card .pa-scan  { opacity: .9; transform: none; }
  .process-card .pa-draw  { stroke-dashoffset: 0; }
  .process-card .pa-trail { opacity: 0; }
  .process-card .pa-bar   { transform: none; }
}

/* ===== BENEFITS ===== */
.section-benefits .heading-section { text-align: center; }
.section-benefits .heading-section .heading-sub,
.section-benefits .heading-section .heading-title { margin-left: auto; margin-right: auto; }
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1.4fr 1fr via min-width */
  gap: 16px;
  margin-bottom: 16px;
}
.benefits-grid:last-child { grid-template-columns: 1fr; margin-bottom: 0; }
.benefits-box {
  background: var(--neutral-100);
  border-radius: 24px;
  padding: 32px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.benefits-progress-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.benefits-progress-item {
  background: var(--white);
  padding: 14px 16px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.benefits-progress-item .progress-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(238,126,34,0.18), rgba(238,126,34,0.05));
  width: 0;
  transition: width 1.2s ease;
}
.benefits-progress-item .progress-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.benefits-progress-item .progress-text .icon-small {
  width: 16px; height: 16px;
  color: var(--brand);
}
.benefits-box .title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--primary);
}
.benefits-box .text { font-size: 14px; color: var(--neutral-600); }
.benefits-step-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.benefits-step-inner .line-step {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(238,126,34,0.4), transparent);
}
.step-item {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%), linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -4px rgba(238,126,34,0.4);
}
.benefits-secure-inner {
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
/* Secure by design — an orange-gradient shield + padlock (matches the section's
   step-node style) with a radar "ping" (echoes the audited / monitored theme). */
.benefits-secure-inner .secure-badge {
  position: relative;
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
}
.secure-shield {
  width: 78px; height: 78px;
  position: relative; z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(238,126,34,0.38));
}
.secure-scan {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border: 2px solid rgba(238,126,34,0.55);
  border-radius: 50%;
  animation: secureScan 2.8s ease-out infinite;
}
.secure-scan.s2 { animation-delay: 1.4s; }
@keyframes secureScan {
  0%   { transform: scale(.6);  opacity: .75; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .secure-scan { animation: none; opacity: 0; } }
.benefits-design-inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.benefits-design-inner .pill {
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
}
.benefits-design-inner .pill { background: var(--primary); color: var(--white); }
.benefits-design-inner .pill.alt { background: var(--brand); }
.benefits-design-inner .pill.outline { background: transparent; color: var(--primary); border: 1px dashed var(--neutral-400); }

/* ===== FEATURES ===== */
.section-features { position: relative; }
.section-features .heading-section { text-align: center; }
.section-features .heading-section .heading-sub,
.section-features .heading-section .heading-title { margin-left: auto; margin-right: auto; }
.features-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
}
.features-center .core {
  width: 120px; height: 120px;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%), linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 24px 60px -16px rgba(238,126,34,0.45);
}
.features-center .core::after {
  content: '';
  position: absolute; inset: -18px;
  border-radius: 36px;
  border: 1px solid var(--neutral-200);
}
.features-center .core::before {
  content: '';
  position: absolute; inset: -36px;
  border-radius: 48px;
  border: 1px dashed var(--neutral-300);
}
.features-center .core span {
  font-family: var(--font);
  font-size: 44px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.04em;
}
.features-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 16px;
}
.features-item {
  background: var(--neutral-100);
  border-radius: 24px;
  padding: 28px;
  transition: all 0.3s;
}
.features-item:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -14px rgba(0,0,0,0.12); }
.features-item .icon-feature {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(238,126,34,0.15) 0%, rgba(13,148,153,0.15) 100%);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.features-item .icon-feature svg { width: 22px; height: 22px; }

/* Capability grid (services) — Icons8 duotone tiles, accent alternates
   orange / teal across the six cards to echo the brand's two-tone motif. */
.cap-grid .features-item:nth-child(odd)  .icon-feature { --hub: var(--brand); }
.cap-grid .features-item:nth-child(even) .icon-feature { --hub: var(--brand-2); }
.cap-grid .icon-feature {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--hub) 22%, transparent);
  box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--hub) 45%, transparent);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.cap-grid .icon-feature svg { width: 26px; height: 26px; display: block; }
.cap-grid .features-item:hover .icon-feature {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hub) 40%, transparent);
  box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--hub) 55%, transparent);
}
.features-item .title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--primary);
}
.features-item p { font-size: 14px; color: var(--neutral-600); }

/* ===== HOME FEATURES — interactive, numbered, accent-alternating grid =====
   Scoped to .section-features so the shared .features-item used on other pages
   is untouched. Auto-numbered (CSS counters) + alternating orange/teal accent. */
.section-features .features-grid { counter-reset: feat; }
.section-features .features-item:nth-child(odd)  { --hub: var(--brand); }
.section-features .features-item:nth-child(even) { --hub: var(--brand-2); }
.section-features .features-item {
  counter-increment: feat;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--hub) 9%, transparent), transparent 42%),
    var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: 30px 32px;
  transition: opacity .8s cubic-bezier(.2,.8,.2,1),
              transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease, border-color .35s ease;
}
/* accent bar grows across the top on hover */
.section-features .features-item::before {
  content: "";
  position: absolute; top: 0; left: 0; height: 3px; width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--hub), transparent);
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.section-features .features-item:hover::before { width: 100%; }
/* auto mono index 01–06 (top-right), brightens to accent on hover */
.section-features .features-item::after {
  content: counter(feat, decimal-leading-zero);
  position: absolute; top: 28px; right: 30px;
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--neutral-400);
  transition: color .3s ease;
}
.section-features .features-item:hover::after { color: var(--hub); }
/* hover: lift + accent border + accent glow */
.section-features .features-item:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hub) 35%, transparent);
  box-shadow: 0 26px 52px -26px color-mix(in srgb, var(--hub) 50%, transparent);
}
/* icon tile — white, accent-bordered, springs on hover */
.section-features .icon-feature {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hub) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--hub) 22%, transparent);
  color: var(--hub);
  box-shadow: 0 4px 10px -5px color-mix(in srgb, var(--hub) 40%, transparent);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease;
}
.section-features .icon-feature svg { width: 24px; height: 24px; }
.section-features .features-item:hover .icon-feature {
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
  background: color-mix(in srgb, var(--hub) 16%, #fff);
  box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--hub) 55%, transparent);
}
/* title picks up the accent on hover */
.section-features .features-item .title { transition: color .3s ease; }
.section-features .features-item:hover .title { color: var(--hub); }
@media (prefers-reduced-motion: reduce) {
  .section-features .features-item,
  .section-features .features-item::before,
  .section-features .icon-feature { transition: none; }
}

/* ===== TOOLS ===== */
.section-tools {
  background:
    radial-gradient(56% 46% at 50% 32%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 68%),
    radial-gradient(40% 44% at 86% 26%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 68%),
    radial-gradient(40% 46% at 12% 24%, color-mix(in srgb, var(--brand-3) 6%, transparent), transparent 68%),
    var(--body);
  position: relative;
  text-align: center;
  overflow: hidden;
}
/* faint blueprint grid, kept to the upper-centre (behind the heading) so it
   never reaches the section's edges / the contact section below. */
.section-tools::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(9,9,11,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9,9,11,0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(58% 48% at 50% 32%, #000 12%, transparent 68%);
          mask-image: radial-gradient(58% 48% at 50% 32%, #000 12%, transparent 68%);
  pointer-events: none;
}
.section-tools .container { position: relative; z-index: 1; }
.section-tools .heading-section { text-align: center; }
.section-tools .heading-section .heading-sub,
.section-tools .heading-section .heading-title { margin-left: auto; margin-right: auto; }
.section-tools .float {
  position: absolute;
  width: 66px; height: 66px;
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f1f1f4 100%);
  border: 1px solid rgba(9,9,11,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;            /* fits tech names (React, Docker, HubSpot…) in the tile */
  letter-spacing: -0.01em;
  color: var(--brand);
  box-shadow:
    0 16px 30px -14px rgba(9,9,11,0.22),
    0 4px 10px -4px rgba(9,9,11,0.12),
    0 8px 26px -10px color-mix(in srgb, currentColor 32%, transparent),  /* colour-matched glow */
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .4s;
  animation: float 6s ease-in-out infinite;
}
.section-tools .float:hover {
  animation-play-state: paused;
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  box-shadow:
    0 26px 50px -16px color-mix(in srgb, currentColor 60%, rgba(9,9,11,0.30)),
    0 6px 14px -6px rgba(9,9,11,0.16),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}
/* Balanced symmetric ring — 5 tiles down each edge at matching heights
   (8 / 27 / 46 / 65 / 83%), hugging the margin where the heading is widest
   and easing inward at the top & bottom. Mirrored left/right. */
.section-tools .float:nth-child(1)  { top: 8%;  left: 14%;  animation-delay: 0s;   color: var(--brand-2); }  /* React */
.section-tools .float:nth-child(2)  { top: 8%;  right: 14%; animation-delay: 0.6s; }                          /* Node */
.section-tools .float:nth-child(3)  { top: 27%; left: 9%;   animation-delay: 1.2s; color: var(--brand-3); }   /* Python */
.section-tools .float:nth-child(4)  { top: 27%; right: 9%;  animation-delay: 1.8s; color: var(--brand-2); }   /* AWS */
.section-tools .float:nth-child(5)  { top: 46%; left: 9%;   animation-delay: 2.4s; color: var(--brand-2); }   /* Figma */
.section-tools .float:nth-child(6)  { top: 46%; right: 9%;  animation-delay: 3.0s; color: var(--brand-3); }   /* Flutter */
.section-tools .float:nth-child(7)  { top: 65%; left: 12%;  animation-delay: 3.6s; }                          /* PostgreSQL */
.section-tools .float:nth-child(8)  { top: 65%; right: 12%; animation-delay: 4.2s; color: var(--brand-2); }   /* Docker */
.section-tools .float:nth-child(9)  { top: 83%; left: 14%;  animation-delay: 4.8s; color: var(--brand-3); }   /* GitHub */
.section-tools .float:nth-child(10) { top: 83%; right: 14%; animation-delay: 5.4s; }                          /* HTML5 */
/* longer label (PostgreSQL) — shrink to fit the 64px tile */
.section-tools .float.sm { font-size: 10px; letter-spacing: -0.02em; padding: 0 4px; }
/* Decorative tiles are desktop-only — below 1025px they'd overlap the centred
   heading (same as the hero orbs/towers, which also hide here). */
@media (max-width: 64em) {
  .section-tools .float { display: none; }
}

/* ===== BOX-BLACK ===== */
.box-black {
  background: var(--primary);
  color: var(--white);
  border-radius: 24px;          /* mobile-first; desktop: 40px via min-width */
  margin: 0 8px;                /* mobile-first; desktop: 0 16px via min-width */
  position: relative;
  overflow: hidden;
}
.box-black .light-top,
.box-black .light-bot {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.box-black .light-top {
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(238,126,34,0.22), transparent 60%);
}
.box-black .light-bot {
  bottom: 10%; right: 0;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(13,148,153,0.18), transparent 60%);
}

/* ===== TEAM ===== */
.section-team .heading-section { text-align: center; }
.section-team .heading-section .heading-sub,
.section-team .heading-section .heading-title { margin-left: auto; margin-right: auto; }
.team-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1.2fr 1fr 1fr via min-width */
  gap: 16px;
}
.team-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.team-item .image {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%), linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 64px;
  font-weight: 700;
  color: var(--white);
}
.team-item .name {
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
  display: block;
}
.team-item .sub {
  font-size: 13px;
  color: var(--neutral-400);
  margin-bottom: 16px;
}
.team-item.style-1 {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  text-align: left;
  align-items: center;
  padding: 16px;
}
.team-item.style-1 .image {
  width: 72px; height: 72px;
  font-size: 24px;
  margin: 0;
  border-radius: 14px;
}
.team-item.style-1 .name { font-size: 15px; margin-bottom: 2px; }
.team-item.style-1 .sub { font-size: 12px; margin-bottom: 0; }
.team-column { display: flex; flex-direction: column; gap: 16px; }

.tf-social {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}
.social-item {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-300);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s;
}
.social-item:hover { background: var(--brand); color: var(--white); }

/* ===== STATISTIC ===== */
.section-statistic {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 64px 0;
  position: relative;
  z-index: 2;
}
.stat-row {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 48px;
  align-items: end;
}
.stat-row .lead {
  font-size: 16px;
  color: var(--neutral-400);
  line-height: 1.5;
  margin-bottom: 32px;
}
.stat-numbers {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: repeat(3, 1fr) via min-width */
  gap: 32px;
}
.stat-item {
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: 24px;
}
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-item .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin-bottom: 12px;
  display: block;
}
.stat-item .num {
  font-family: var(--font);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}
.stat-item .num .pct { color: var(--brand); }
.stat-item .num .decimal {
  font-family: var(--font-mono);
  font-size: 0.4em;
  vertical-align: super;
  color: var(--neutral-500);
  font-weight: 500;
  margin-left: 2px;
}

/* ===== AWARDS ===== */
.section-awards .heading-section { text-align: center; }
.section-awards .heading-section .heading-sub { margin-left: auto; margin-right: auto; }
.awards-list { display: flex; flex-direction: column; position: relative; z-index: 2; }
.awards-item {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 80px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.awards-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.awards-item .image {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  color: var(--brand);
  font-size: 22px;
}
.awards-item .title { font-size: 17px; color: var(--white); font-weight: 600; }
.awards-item .text { font-size: 15px; color: var(--neutral-400); }
.awards-item .year {
  font-family: var(--font);
  font-size: 17px;
  color: var(--neutral-400);
  font-weight: 600;
  text-align: right;
}

/* ===== TESTIMONIALS ===== */
.section-testimonials .row-test {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.testimonial-block .stars {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  color: var(--brand);
}
.testimonial-block .stars svg { width: 18px; height: 18px; }
.testimonial-block .desc {
  font-family: var(--font);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
}
.testimonial-block .cite {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.testimonial-block .cite .name { font-size: 14px; font-weight: 600; color: var(--white); }
.testimonial-block .cite .sub { font-size: 14px; color: var(--neutral-400); }
.testimonial-block .cite .line { width: 20px; height: 1px; background: var(--neutral-700); }

.testimonial-visual {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 30%, rgba(238,126,34,0.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(13,148,153,0.35), transparent 60%),
    rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.testimonial-visual .symbol {
  font-family: var(--font);
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 300;
  color: rgba(255,255,255,0.1);
  line-height: 0.8;
}
.testimonial-visual .corner-tag {
  position: absolute;
  top: 20px; left: 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  padding: 7px 12px;
  border-radius: 99px;
}

/* ===== PRICING ===== */
.section-pricing { background: var(--body); padding: clamp(80px, 10vw, 120px) 0; position: relative; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 16px;
}
.pricing-item {
  background: var(--white);
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.pricing-item .top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
  font-size: 14px;
}
.pricing-item .top .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--light-pill);
  padding: 6px 14px;
  border-radius: 99px;
  font-weight: 600;
  box-shadow: var(--shadow-emboss-light);
}
.pricing-item .top .line { flex: 1; height: 1px; background: var(--neutral-200); }
.pricing-item .top .for { color: var(--neutral-500); font-weight: 600; }
.pricing-item .heading-price {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pricing-item .price-number {
  font-family: var(--font);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}
.pricing-item .price-per { font-size: 15px; color: var(--neutral-500); font-weight: 500; }
.pricing-item .divider { height: 1px; background: var(--neutral-200); margin-bottom: 28px; }
.pricing-item .content { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.pricing-item .content .tf-btn,
.pricing-item .content .tf-btn-2 { margin-top: auto; align-self: flex-start; }
.pricing-item .desc-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--primary); }
.pricing-item .desc { font-size: 14px; color: var(--neutral-600); font-weight: 500; line-height: 1.5; }
.list-text { display: flex; flex-direction: column; gap: 12px; }
.list-text li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}
.list-text li::before {
  content: '✓';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.pricing-item.style-black {
  background: var(--primary);
  color: var(--white);
}
.pricing-item.style-black .top .pill {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.3);
}
.pricing-item.style-black .top .for { color: var(--neutral-400); }
.pricing-item.style-black .top .line { background: rgba(255,255,255,0.1); }
.pricing-item.style-black .price-number { color: var(--white); }
.pricing-item.style-black .price-per { color: var(--neutral-400); }
.pricing-item.style-black .divider { background: rgba(255,255,255,0.1); }
.pricing-item.style-black .desc-title { color: var(--white); }
.pricing-item.style-black .desc { color: var(--neutral-300); }
.pricing-item.style-black .list-text li { color: var(--neutral-200); }

/* ===== FAQ ===== */
.section-faqs { background: var(--body); padding: clamp(80px, 10vw, 120px) 0; }
.section-faqs .heading-section { text-align: center; }
.section-faqs .heading-section .heading-sub,
.section-faqs .heading-section .heading-title { margin-left: auto; margin-right: auto; }
.accordion-asked {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accordion-asked-item {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}
.accordion-asked-button {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}
.accordion-asked-button::after {
  content: '+';
  font-size: 22px;
  color: var(--brand);
  font-weight: 300;
  transition: transform 0.3s;
}
.accordion-asked-button.active::after { transform: rotate(45deg); }
.accordion-asked-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion-asked-body.show { max-height: 300px; }
.accordion-asked-body-inner {
  padding: 0 24px 24px;
  font-size: 14px;
  color: var(--neutral-600);
  line-height: 1.6;
}

/* ===== CONTACT ===== */
.section-contact {
  position: relative;
  border-radius: 24px;          /* mobile-first; desktop: 40px via min-width */
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(238,126,34,0.18), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(13,148,153,0.18), transparent 50%),
    var(--primary);
  padding: clamp(48px, 6vw, 80px);
  margin: 0 8px;                /* mobile-first; desktop: 0 16px via min-width */
  color: var(--white);
}
.section-contact .row-contact {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1.2fr via min-width */
  gap: 48px;
  align-items: start;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contact-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact-item .icon-big {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.contact-item .icon-big svg { width: 22px; height: 22px; }
.contact-item .title { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.contact-item .text { font-size: 15px; color: var(--neutral-300); }
.form-contact {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 40px);
}
.form-contact .heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 28px;
}
.form-contact fieldset { margin-bottom: 18px; border: 0; padding: 0; }
.form-contact label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-contact input,
.form-contact textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 10px 0;
  font: 400 16px/1.5 var(--font);
  color: var(--primary);
  transition: border-color 0.3s;
}
.form-contact input:focus,
.form-contact textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.form-contact textarea { min-height: 90px; resize: vertical; }
.form-contact input::placeholder,
.form-contact textarea::placeholder { color: var(--neutral-500); }

/* ===== FOOTER (Phase 2 — container-query driven) ===== */
footer {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(238,126,34,0.10), transparent 62%),
    radial-gradient(55% 65% at 84% 22%, rgba(13,148,153,0.08), transparent 66%),
    radial-gradient(45% 55% at 14% 30%, rgba(139,92,246,0.06), transparent 70%),
    var(--primary);
  color: var(--white);
  padding: 80px 0 28px;
  position: relative;
  border-radius: 24px 24px 0 0;   /* mobile-first; desktop: 40px 40px via min-width */
  margin: 16px 8px 0;             /* mobile-first; desktop: 16px 16px via min-width */
  overflow: hidden;
}
/* Container context — the footer's inner wrap, not the viewport */
footer > .container,
footer > .wrap {
  container-type: inline-size;
  container-name: footer;
}
.footer-image {
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 800;
  color: rgba(255,255,255,0.075);
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.footer-content {
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;
}
.footer-content .footer-logo { margin-bottom: 24px; }
.footer-content .footer-logo .mark { width: 48px; height: 48px; border-radius: 14px; }
.footer-content .footer-logo .footer-logo-img {
  height: 46px; width: auto; display: block;   /* already-white inverted SVG */
}
.footer-content .title {
  font-family: var(--font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.footer-content .desc {
  font-size: 14px;
  color: var(--neutral-400);
  margin-bottom: 28px;
}
.tf-social-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.tf-social-1 > a,
.tf-social-1 .soc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  padding: 8px 12px 8px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  transition: background 0.2s;
  cursor: pointer;
  border: 0;
  font-family: var(--font);
}
.tf-social-1 > a:hover,
.tf-social-1 .soc-btn:hover { background: rgba(255,255,255,0.1); }
.tf-social-1 > a .pill,
.tf-social-1 .soc-btn .pill {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--white);
}
/* Region chooser popover (channels with both ZA + MY) */
.tf-social-1 .soc-wrap { position: relative; display: inline-flex; }
.tf-social-1 .soc-pop {
  position: absolute;
  bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--primary);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 168px;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.6);
  z-index: 5;
}
.tf-social-1 .soc-pop[hidden] { display: none; }
.tf-social-1 .soc-pop a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--white);
  white-space: nowrap; transition: background 0.15s;
}
.tf-social-1 .soc-pop a:hover { background: rgba(255,255,255,0.1); }
.tf-social-1 .soc-pop::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--primary);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  position: relative;
  z-index: 2;
  /* Mobile-first: stacked vertical, centered */
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: center;
  text-align: center;
}
/* At ~520px container width: 2 rows (links on row 1, copy + back-top on row 2) */
@container footer (min-width: 32.5em) {
  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "links links"
      "copy  back";
    justify-items: stretch;
    text-align: left;
  }
  .footer-bottom .footer-links { grid-area: links; justify-content: center; }
  .footer-bottom .coppy-rights { grid-area: copy;  justify-self: start; }
  .footer-bottom .back-top     { grid-area: back;  justify-self: end; }
}
/* Wide footers: everything on ONE row — menu (left) · copyright (centre) · back-to-top (right) */
@container footer (min-width: 900px) {
  .footer-bottom {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "links copy back";
    align-items: center;
    gap: 16px 28px;
  }
  .footer-bottom .footer-links { justify-content: flex-start; flex-wrap: nowrap; gap: 20px; }
  .footer-bottom .coppy-rights { justify-self: center; text-align: center; }
  .footer-bottom .back-top     { justify-self: end; }
}
/* Fallback for browsers without @container support */
@supports not (container-type: inline-size) {
  @media (min-width: 32.5em) {
    .footer-bottom {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "links links" "copy back";
    }
    .footer-bottom .footer-links { grid-area: links; justify-content: center; }
    .footer-bottom .coppy-rights { grid-area: copy; justify-self: start; }
    .footer-bottom .back-top { grid-area: back; justify-self: end; }
  }
  @media (min-width: 48.75em) {
    .footer-bottom {
      grid-template-columns: 1fr auto 1fr;
      grid-template-areas: "links copy back";
    }
  }
}
.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-300);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }
.coppy-rights { font-size: 13px; color: var(--neutral-400); margin: 0; }
/* Registration line — spans full width on its own row beneath the copyright */
.footer-bottom .reg-info {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--neutral-500);
  text-align: center;
}
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-300);
}
.back-top::after { content: '↑'; font-size: 16px; }

/* ===== INNER PAGE HERO ===== */
.page-hero {
  padding: 130px 8px 60px;         /* mobile-first; desktop enhanced via min-width */
  position: relative;
  text-align: center;
}
.page-hero .hero-image {
  position: absolute;
  inset: 110px 8px 0 8px;          /* mobile-first; desktop enhanced via min-width */
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(238,126,34,0.30) 0%, transparent 62%),
    radial-gradient(ellipse 46% 46% at 84% 82%, rgba(13,148,153,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #18181b 0%, #0a0a12 100%);
  overflow: hidden;
}
.page-hero .hero-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 32%, #000 26%, transparent 82%);
          mask-image: radial-gradient(ellipse 72% 64% at 50% 32%, #000 26%, transparent 82%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .title {
  font-size: var(--fs-7);       /* fluid 57.3→85.8 */
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 auto 24px;
  max-width: 16ch;
  color: var(--white);
}
.page-hero .text {
  font-size: 17px;
  color: var(--neutral-300);
  max-width: 56ch;
  margin: 24px auto 0;
}
/* Product detail: subtitle on its own line, directly under the name */
.pd-subtitle {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--brand-2) 55%, #ffffff);
  margin: 8px 0 0;
}
.page-hero .sub-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 16px;
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  background: linear-gradient(0deg, #f5f5f5, #f5f5f5);
  box-shadow: var(--shadow-emboss-light);
  margin-bottom: 24px;
}

/* ===== About sections ===== */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1.6fr via min-width */
  gap: 32px;
  align-items: start;
}
.story-grid p {
  font-size: 17px;
  color: var(--neutral-600);
  line-height: 1.7;
  margin-bottom: 20px;
}
.vm-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 16px;
  margin-top: 60px;
}
.vm-card {
  padding: 40px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.vm-card.vision { background: var(--primary); color: var(--white); }
.vm-card.mission { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: var(--white); }
.vm-card .label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
  font-weight: 600;
}
.vm-card .title-big {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--white);
}
.vm-card p { color: rgba(255,255,255,0.85); font-size: 15px; }

/* ===== Solution detail ===== */
.sol-detail {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 32px;
  align-items: center;
}
.sol-visual {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hub, var(--brand)) 32%, transparent), transparent 62%),
    #0a0a12;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sol-visual .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
}
.sol-visual .symbol {
  font-size: 0;
  position: relative;
  z-index: 1;
}
/* the case-study wireframe sits larger in the detail page's bigger visual panel */
.sol-visual .wf-stage { transform: scale(1.55); }
.sol-visual .corner-tag {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 7px 12px;
  border-radius: 99px;
  box-shadow: var(--shadow-emboss-light);
}
.sol-detail .heading-title { font-size: clamp(32px, 4vw, 52px); margin-bottom: 20px; }
.sol-detail .lead { font-size: 17px; color: var(--primary); margin-bottom: 24px; font-weight: 600; }
.sol-detail p { font-size: 15px; color: var(--neutral-600); }
.sol-detail .features { margin-top: 28px; }
.sol-detail .features li {
  padding: 14px 0;
  border-top: 1px solid var(--neutral-200);
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  color: var(--primary);
}
.sol-detail .features li:last-child { border-bottom: 1px solid var(--neutral-200); }
.sol-detail .features .num { color: var(--brand); font-weight: 700; min-width: 40px; }

.related-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: repeat(3, 1fr) via min-width */
  gap: 16px;
}
.related-card {
  background: var(--white);
  border-radius: 24px;
  padding: 28px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -14px rgba(0,0,0,0.12); }
.related-card .num { font-size: 12px; color: var(--brand); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.related-card h4 { font-size: 20px; font-weight: 600; color: var(--primary); margin-bottom: 10px; }
.related-card p { font-size: 14px; color: var(--neutral-600); flex: 1; margin-bottom: 16px; }
.related-card .arrow { color: var(--brand); font-weight: 600; font-size: 13px; }

/* ===== Blog ===== */
.blog-list {
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1fr 1fr via min-width */
  gap: 24px 16px;
}
.blog-card {
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.12); }
.blog-card .image {
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(circle at 30% 30%, rgba(238,126,34,0.2), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(13,148,153,0.18), transparent 50%),
    var(--neutral-100);
  position: relative;
  overflow: hidden;
}
.blog-card .image .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
.blog-card .image .num-watermark {
  position: absolute;
  top: 16px; right: 24px;
  font-family: var(--font);
  font-size: 88px;
  font-weight: 200;
  color: rgba(9,9,11,0.12);
  line-height: 1;
}
.blog-card .image .label {
  position: absolute;
  bottom: 16px; left: 16px;
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 99px;
  box-shadow: var(--shadow-emboss-light);
}
.blog-card .content { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.blog-card .date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.blog-card h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 14px;
  line-height: 1.2;
}
.blog-card p { font-size: 14px; color: var(--neutral-600); flex: 1; margin-bottom: 18px; }
.blog-card .read-more { font-size: 13px; font-weight: 600; color: var(--brand); }
.blog-card.feat {
  grid-column: span 1;          /* mobile-first; desktop: span 2 via min-width */
  display: grid;
  grid-template-columns: 1fr;   /* mobile-first; desktop: 1.1fr 1fr via min-width */
}
.blog-card.feat .image { aspect-ratio: 4 / 3; }
.blog-card.feat h3 { font-size: clamp(26px, 2.4vw, 36px); }
.blog-card.feat .content { padding: 40px; justify-content: center; }

/* ===== Article ===== */
.article-body {
  max-width: 720px;
  margin: 0 auto;
}
.article-body p {
  font-size: 17px;
  color: var(--neutral-600);
  line-height: 1.7;
  margin-bottom: 22px;
}
.article-body h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  color: var(--primary);
  margin: 48px 0 20px;
  letter-spacing: -0.02em;
}
.article-body h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--primary);
  margin: 36px 0 14px;
}
.article-body ul { margin: 20px 0 20px 20px; }
.article-body li { font-size: 16px; color: var(--neutral-600); margin-bottom: 8px; line-height: 1.7; }
.article-body strong { color: var(--primary); font-weight: 700; }
.article-body blockquote {
  border-left: 3px solid var(--brand);
  padding: 12px 0 12px 28px;
  margin: 32px 0;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--neutral-200);
  flex-wrap: wrap;
}
.article-meta .author { display: flex; align-items: center; gap: 12px; }
.article-meta .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
.article-meta .name { font-size: 14px; font-weight: 600; color: var(--primary); }
.article-meta .date { font-size: 11px; color: var(--brand); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* =========================================================
   §B · RESPONSIVE ENHANCEMENTS (Phase 7 — mobile-first)
   Base rules above are mobile state. Larger viewports enhance upward.
   Breakpoint: 1024px (64em) for desktop multi-column layouts.
   ========================================================= */

/* Small mobile defaults (already in base styles) — these rules ENHANCE upward */

/* ≥ 481px — large mobile / fold-open: hero card gains breathing room */
@media (min-width: 30.0625em) {  /* 481px */
  .section-hero { padding: 120px 16px 0; }
  .section-hero .hero-image,
  .hero-overlay { inset: 120px 16px 0 16px; border-radius: 40px; }
  .page-hero { padding: 200px 16px 80px; }
  .page-hero .hero-image { inset: 120px 16px 0 16px; border-radius: 40px; }
  .box-white, .box-black, .section-contact { margin-inline: 16px; border-radius: 40px; }
  footer { margin: 16px 16px 0; border-radius: 40px 40px 0 0; }
  .col-left { padding: 48px; }
  .col-left .globe { width: 340px; height: 340px; right: 8px; bottom: auto; }
  .header-inner > .tf-btn { display: inline-flex; }
}

/* Medium desktop (1025–1200px) — wide logo + 7 nav items + CTA share one row.
   Tighten gap, item padding, and logo height so the header never wraps or overflows. */
@media (min-width: 64.0625em) and (max-width: 75em) {
  .nav-menu-main { gap: 14px; }
  .nav-menu-main .item-link { padding-left: 8px; }
  .logo-img { height: clamp(28px, 3.2vw, 36px); }
}

/* ≤ 1024px (64em) — mobile / tablet: inline nav collapses into a tap-to-open dropdown */
@media (max-width: 64em) {
  .header-inner { position: relative; }
  /* Compact wordmark replaces the full lockup; CTA moves into the dropdown menu. */
  .logo-full { display: none; }
  .logo-compact { display: block; height: clamp(16px, calc((100vw - 96px) / 13), 30px); }
  .header-inner > .tf-btn { display: none; }
  .nav-menu-main.is-open .nav-cta-li { display: block; }
  .nav-menu-main.is-open .nav-cta-li .item-link { color: var(--brand); font-weight: 700; }
  .nav-menu-main.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.28);
    z-index: 200;
  }
  .nav-menu-main.is-open .item-link {
    display: block;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 16px;
  }
  /* Drop the desktop accent line/gradient inside the dropdown for a clean list */
  .nav-menu-main.is-open .item-link::before,
  .nav-menu-main.is-open .item-link::after { display: none; }
  .nav-menu-main.is-open .item-link:hover,
  .nav-menu-main.is-open .item-link.active {
    background: var(--neutral-100);
    color: var(--brand-deep);
  }
}

/* ≥ 1025px (64.0625em) — desktop: multi-column grids */
@media (min-width: 64.0625em) {
  .nav-menu-main { display: flex; }
  .nav-toggle { display: none; }
  .header-inner { gap: 32px; padding: 14px var(--gutter); }

  /* Two-column layouts */
  .about-grid               { grid-template-columns: 1.3fr 1fr; }
  .section-services .row-services { grid-template-columns: 1fr 1.3fr; gap: 80px; }
  .benefits-grid            { grid-template-columns: 1.4fr 1fr; }
  .benefits-grid:last-child { grid-template-columns: 1fr 1.4fr; }
  .features-grid            { grid-template-columns: 1fr 1fr; }
  .stat-row                 { grid-template-columns: 1fr 1fr; gap: 60px; }
  .section-testimonials .row-test { grid-template-columns: 1fr 1fr; gap: 60px; }
  .pricing-grid             { grid-template-columns: 1fr 1fr; }
  .section-contact .row-contact   { grid-template-columns: 1fr 1.2fr; gap: 60px; }
  .story-grid               { grid-template-columns: 1fr 1.6fr; gap: 60px; }
  .vm-grid                  { grid-template-columns: 1fr 1fr; }
  .sol-detail               { grid-template-columns: 1fr 1fr; gap: 60px; }
  .blog-list                { grid-template-columns: 1fr 1fr; }
  .blog-card.feat           { grid-template-columns: 1.1fr 1fr; grid-column: span 2; }
  .blog-card.feat .content  { padding: 40px; }

  /* Three+ column layouts */
  .featured-works-list      { grid-template-columns: repeat(2, 1fr); }
  .process-slide            { grid-template-columns: repeat(3, 1fr); }
  .team-grid                { grid-template-columns: 1.2fr 1fr 1fr; }
  .stat-numbers             { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .related-grid             { grid-template-columns: repeat(3, 1fr); }

  /* Stat dividers swap from top borders (mobile) to left borders (desktop) */
  .stat-item             { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 24px; border-top: none; padding-top: 0; }
  .stat-item:first-child { border-left: none; padding-left: 0; }

  /* Awards row gains 4-col layout at desktop */
  .awards-item              { grid-template-columns: 60px 1fr 1fr 80px; row-gap: 0; }
  .awards-item .text        { grid-column: auto; }
  .awards-item .year        { grid-column: auto; }
}

/* ===== Reveal animation ===== */
.effectFade, .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.effectFade.in, .reveal.in { opacity: 1; transform: none; }
.fadeRotateX {
  transform: translateY(20px) rotateX(-12deg);
  transform-origin: bottom;
}
.fadeRotateX.in { transform: none; }
/* Hero reveal-on-scroll override — disable so entrance choreography runs */
.section-hero .effectFade { opacity: 1; transform: none; transition: none; }

/* Custom cursor follower for hero card */
.cursor-orb {
  position: fixed;
  top: 0; left: 0;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,126,34,0.35) 0%, rgba(238,126,34,0.08) 30%, transparent 60%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-orb.on { opacity: 1; }
@media (max-width: 1024px) { .cursor-orb { display: none; } }

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(9,9,11,0.18); border-radius: 99px; border: 2px solid var(--body); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Selection */
::selection { background: var(--brand); color: var(--white); }

/* Section hairline rule — clinical precision */
.section-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--neutral-200) 20%, var(--neutral-200) 80%, transparent 100%);
  margin: 0;
}
.box-black .section-rule {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent 100%);
}

/* Sentinel — small mono coord above sections */
.sentinel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--neutral-500);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sentinel::before,
.sentinel::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}
.box-black .sentinel { color: var(--neutral-400); }

/* =========================================================
   §Z · LARGE-SCREEN SAFETY CAP + FOLDABLE SUPPORT (Phase 9)
   ========================================================= */

/* Wide screens (1920px+): hero/box-white/box-black gutters scale */
@media (min-width: 120em) {  /* 1920px+ */
  .section-hero .hero-image,
  .page-hero .hero-image { inset: 120px 32px 0 32px; }
  .hero-overlay { inset: 120px 32px 0 32px; }
  .box-white,
  .box-black,
  .section-contact { margin-inline: 32px; }
  footer { margin: 16px 32px 0; }
}

/* Ultra-wide screens (2560px+): keep content cap, increase visual breathing */
@media (min-width: 160em) {  /* 2560px+ */
  .section-hero .hero-image,
  .page-hero .hero-image { inset: 120px 48px 0 48px; }
  .hero-overlay { inset: 120px 48px 0 48px; }
  .box-white,
  .box-black,
  .section-contact { margin-inline: 48px; }
  footer { margin: 16px 48px 0; }
}

/* Foldable: dual-screen vertical fold (Surface Duo, Galaxy Z Fold-style) */
@media (spanning: single-fold-vertical) {
  /* Push key content away from the hinge */
  .container { padding-inline: max(env(fold-left, var(--gutter)), var(--gutter)); }
  /* Cube stage prefers single segment — collapse to single column */
  .cube-stage { grid-template-columns: 1fr !important; gap: 24px; }
  /* Hide orbs across the hinge — paths would cross the gap */
  .orb-flow { display: none; }
}

/* Foldable: horizontal fold (Galaxy Z Flip-style) */
@media (spanning: single-fold-horizontal) {
  .section-hero { min-height: auto; padding-block: 100px 24px; }
  .section-hero .hero-image { inset: 100px 16px 0 16px; }
  .hero-overlay { inset: 100px 16px 0 16px; }
  .hero-cube { width: 200px; height: 200px; }
}

/* Two-segment viewports (dual-screen mode) */
@media (horizontal-viewport-segments: 2) {
  .cube-stage { grid-template-columns: 1fr; }
  .orb-flow { display: none; }
}

/* Reduce motion globally — disable all decorative animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-cube,
  .orb,
  .hero-float,
  .marquee-track { animation: none !important; }
}

/* =========================================================
   §C · LOGIN — Solutions Hub sign-in (login.html)
   ========================================================= */
.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 16px 64px;          /* clears the fixed header */
  background: var(--body);
  position: relative;                 /* anchor the full-page grid + glow */
  overflow: hidden;
}
.login-section .container {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;                         /* content above the grid/glow */
}
.login-card {
  width: 100%;
  max-width: 480px;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 24px 60px -32px rgba(9,9,11,0.20);
}
.login-title {
  font-family: var(--font);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 14px 0 12px;
}
.login-title .accent { color: var(--brand); -webkit-text-fill-color: var(--brand); }
.login-sub {
  color: var(--neutral-600);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.login-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.login-form fieldset label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  background: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  padding: 13px 16px;
  font: 400 16px/1.5 var(--font);
  color: var(--primary);
  transition: border-color 0.3s, background 0.3s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.login-form input::placeholder { color: var(--neutral-500); }
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 24px;
}
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
}
.login-remember input { width: 15px; height: 15px; accent-color: var(--brand); }
.login-forgot { font-size: 13px; font-weight: 600; color: var(--brand); }
.login-forgot:hover { color: var(--brand-2); }
.login-foot {
  margin: 24px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--neutral-600);
}
.login-foot a { color: var(--brand); font-weight: 600; }
.login-foot a:hover { color: var(--brand-2); }

/* — Login gate: Session Locker (locked screen) cross-fades to the sign-in card on click.
   Progressive enhancement — without JS no state class is set, so both simply stack. — */
.login-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 32px);
  width: 100%;
  padding: clamp(18px, 3vw, 28px);
  align-content: center;
  justify-items: center;
}
.login-layout .login-card { width: 100%; max-width: 480px; }
.login-layout .locker { width: 360px; max-width: 100%; justify-self: center; }

/* Locked → show only the locker.  Unlocked → show only the form. */
.login-layout.is-locked .login-card { display: none; }
.login-layout.is-unlocked .locker { display: none; }
.login-layout.is-unlocking .locker {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.login-layout.is-unlocked .login-card { animation: loginReveal 0.5s ease both; }
@keyframes loginReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* — Session Locker (decorative) — sits transparently on the console surface — */
.locker {
  width: 100%;
  color: var(--white);
}
.locker-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 620px;              /* enables the 3D cube around the lock */
}
/* Ring around the lock — a child of the cube, centred on the same plane as the
   lock bubble, so it tumbles in 3D together with the lock as the cube spins. */
.locker-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 132px; height: 132px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.06),
    rgba(139,92,246,0.9) 25%,
    rgba(13,148,153,0.6) 50%,
    rgba(255,255,255,0.06) 72%,
    rgba(255,255,255,0.06));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  pointer-events: none;
  backface-visibility: visible;
}
.locker-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 112px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);   /* centred in the cube; inherits the cube's 3D spin */
  backface-visibility: visible;        /* keep the bubble visible (show its back) as it turns away */
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 20px 60px rgba(238,126,34,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  pointer-events: auto;                /* clickable even though the cube is pointer-events:none */
  transition: transform 0.2s ease;
}
.locker-core::before {                 /* glossy top edge */
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0.6; pointer-events: none;
}
.locker-core:hover { transform: translate(-50%, -50%) scale(1.04); }
.locker-core:active { transform: translate(-50%, -50%) scale(0.97); }
.locker-core:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
/* Invite the click while locked (glow pulse only — leaves :hover transform free) */
.login-layout.is-locked .locker-core { animation: lockPulse 2.4s ease-in-out infinite; }
@keyframes lockPulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(238,126,34,0.40), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 22px 74px rgba(238,126,34,0.66), inset 0 1px 0 rgba(255,255,255,0.4); }
}
/* Two stacked lock glyphs — toggle closed → open on unlock */
.locker-core .lock-glyph {
  position: absolute;
  top: 50%; left: 50%;
  width: 42%; height: 42%;
  transform: translate(-50%, -50%);
  color: var(--white);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.locker-core .lock-open { display: none; }
.locker-core.is-open .lock-closed { display: none; }
.locker-core.is-open .lock-open { display: block; }

/* The lock sits INSIDE a holographic cube that spins at rest. On hover/focus
   the spin freezes, the cube squares up to face you, and the front parts like
   double doors to reveal — and arm — the lock. The translucent cube renders in
   front of the lock (z-index 3) so the lock reads as enclosed. JS (lockerCube)
   freezes/resumes the spin; the base transform == the spin's 0° (facing) pose. */
.locker-cube {
  position: absolute;
  top: 50%; left: 50%;
  width: 168px; height: 168px;
  transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 3;
  pointer-events: none;
  animation: lockerCubeSpin 18s linear infinite;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Full angular tumble — same pattern as the home-page Intelligence-Core cube:
   Y swivels 0→360° while X tilts to expose the top (25%) and bottom (75%) faces.
   0%/100% == the base pose, so the hover freeze/resume stays seamless. */
@keyframes lockerCubeSpin {
  0%   { transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg); }
  25%  { transform: translate(-50%, -50%) rotateX(-60deg) rotateY(90deg); }
  50%  { transform: translate(-50%, -50%) rotateX(-20deg) rotateY(180deg); }
  75%  { transform: translate(-50%, -50%) rotateX(28deg)  rotateY(270deg); }
  100% { transform: translate(-50%, -50%) rotateX(-20deg) rotateY(360deg); }
}
.locker-cube .cf {
  position: absolute; inset: 0;
  border: 1px solid rgba(139,92,246,0.5);
  background: rgba(139,92,246,0.05);
}
.locker-cube .back   { transform: translateZ(-84px); }
.locker-cube .left   { transform: rotateY(-90deg) translateZ(84px); border-color: rgba(13,148,153,0.5); background: rgba(13,148,153,0.05); }
.locker-cube .right  { transform: rotateY(90deg)  translateZ(84px); border-color: rgba(13,148,153,0.5); background: rgba(13,148,153,0.05); }
.locker-cube .top    { transform: rotateX(90deg)  translateZ(84px); }
.locker-cube .bottom { transform: rotateX(-90deg) translateZ(84px); }

/* Front face = two doors (the "curtains") */
.locker-cube .door {
  position: absolute; top: 0;
  width: 50%; height: 100%;
  border: 1px solid rgba(139,92,246,0.55);
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.06));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.locker-cube .door-l { left: 0;  transform-origin: left center;  border-right: 0; transform: translateZ(84px) rotateY(0deg); }
.locker-cube .door-r { right: 0; transform-origin: right center; border-left: 0;  transform: translateZ(84px) rotateY(0deg); }

/* OPEN — JS adds .cube-open on hover/focus: doors swing apart */
.locker.cube-open .door-l { transform: translateZ(84px) rotateY(-115deg); opacity: 0.8; }
.locker.cube-open .door-r { transform: translateZ(84px) rotateY(115deg);  opacity: 0.8; }

/* Touch (no hover): static, doors open, lock reachable */
@media (hover: none) {
  .locker-cube { animation: none; transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg); }
  .locker-cube .door-l { transform: translateZ(84px) rotateY(-115deg); opacity: 0.8; }
  .locker-cube .door-r { transform: translateZ(84px) rotateY(115deg);  opacity: 0.8; }
}
.locker-badge {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  display: grid; place-items: center;
  z-index: 3;
}
.locker-badge svg { width: 16px; height: 16px; color: var(--white); }
.locker-tools {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 3%, 16px);
  margin-top: 8px;
}
.locker-tool {
  flex-shrink: 0;
  width: clamp(46px, 13%, 56px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.9);
  transition: background 0.25s ease, transform 0.25s ease;
}
.locker-tool:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.locker-tool svg { width: 20px; height: 20px; }
.locker-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.locker-caption h3 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 4px;
}
.locker-caption > div > p {
  font-size: 13px;
  color: var(--neutral-400);
  margin: 0;
  line-height: 1.45;
}

/* "Click to unlock" hint — shown only while the gate is locked */
.locker-hint {
  display: none;
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}
.locker-hint span { display: inline-block; animation: hintNudge 1.6s ease-in-out infinite; }
.login-layout.is-locked .locker-hint { display: block; }
@keyframes hintNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* Respect reduced-motion for all gate cues */
@media (prefers-reduced-motion: reduce) {
  .login-layout.is-locked .locker-core { animation: none; }
  .locker-hint span { animation: none; }
  .login-layout.is-unlocked .login-card { animation: none; }
  .locker-cube { animation: none; transition: none; }
  .locker-cube .door { transition: none; }
}

/* =========================================================
   §C2 · LOGIN SPLIT — sign-in gate + 3D greeting-robot showcase
   ========================================================= */
/* Unified auth console — one panel; a shared grid + glow scene flows behind both panes */
.login-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stacked */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.login-split > .login-layout,
.login-split > .robot-stage { position: relative; z-index: 1; }
.login-split .robot-stage  { order: 1; }   /* mobile: robot above the box */
.login-split .login-layout { order: 2; }
@media (min-width: 64.0625em) {
  .login-split {
    grid-template-columns: 1.15fr 1fr;       /* gate (form/locker) wider | robot */
    align-items: stretch;
    min-height: 600px;
  }
  .login-split .login-layout { order: 1; }
  .login-split .robot-stage  { order: 2; }
}

/* Shared console scene — one continuous floor + brand glow behind both panes */
.console-grid {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  /* Flat subtle grid — same pattern as the homepage Toolkit section */
  background-image:
    linear-gradient(to right, rgba(9,9,11,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9,9,11,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(125% 105% at 50% 40%, #000 55%, transparent 100%);
}
.console-glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 50% 30%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 70%),
    radial-gradient(40% 50% at 80% 60%, color-mix(in srgb, var(--brand-2) 9%, transparent), transparent 72%),
    radial-gradient(34% 44% at 16% 64%, color-mix(in srgb, var(--brand-3) 7%, transparent), transparent 72%);
}
/* Caption beneath the robot (moved from the locker) */
.robot-caption { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; padding: 0 16px; }
.robot-caption h3 { font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--primary); margin: 0 0 2px; }
.robot-caption p { font-size: 13px; color: var(--neutral-600); margin: 0; }
/* Once unlocked (sign-in / request-access form showing), drop the locked-state caption */
.login-split:has(.login-layout.is-unlocked) .robot-caption { display: none; }

/* "TAP HERE" — one straight label on the lock's front face; tumbles WITH the cube/lock (no spin of its own) */
.lock-tap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(80px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand);
  white-space: nowrap; pointer-events: none; display: none;
  backface-visibility: hidden;
}
.login-layout.is-locked .lock-tap { display: block; }

/* — 3D robot stage — */
.robot-stage {
  position: relative;
  width: 100%;
  min-height: 480px;
}
.robot-window {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.robot-screen {
  position: relative; flex: 1;
  overflow: hidden;
}
/* Login/request-access form feedback + honeypot */
.login-msg { display: block; margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #ff9a9a; }
.login-msg.ok { color: #86efac; }
.login-msg[hidden] { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* — Self-built animated robot (replaces the Spline embed) — */
.robot-aura {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(42% 38% at 50% 46%, rgba(238,126,34,0.22), transparent 70%),
    radial-gradient(50% 46% at 50% 62%, rgba(139,92,246,0.16), transparent 72%);
  pointer-events: none;
}
.robot-bot {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
}
.robot-bot svg { width: min(74%, 340px); height: auto; overflow: visible; filter: drop-shadow(0 0 9px rgba(140,175,200,0.42)) drop-shadow(0 6px 18px rgba(0,0,0,0.55)); }
/* Glowing white line down the middle of each ear */
.bot-ear-line { filter: drop-shadow(0 0 4px rgba(170,255,255,0.95)); }
/* Cursor-gaze: head + whole robot ease toward the pointer (JS sets the transform) */
.bot-gaze, .bot-head {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease-out;
}
.bot-head { transform-origin: 50% 90%; }
.bot-float { animation: botFloat 4.6s ease-in-out infinite; }
@keyframes botFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bot-eye {
  transform-box: fill-box; transform-origin: center;
  animation: botBlink 5.6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(127,233,239,0.85));
}
@keyframes botBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
.bot-smile {
  filter: drop-shadow(0 0 4px rgba(127,233,239,0.55));
  transform-box: fill-box; transform-origin: center top;
  animation: botTalk 3.4s ease-in-out infinite;
}
@keyframes botTalk { 0%, 100% { transform: scaleY(0.8); } 50% { transform: scaleY(1.6); } }
.bot-chest { filter: drop-shadow(0 0 4px rgba(238,126,34,0.5)); }
.bot-chest-core {
  transform-box: fill-box; transform-origin: center;
  animation: botPulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(238,126,34,0.9));
}
.bot-antenna-tip {
  transform-box: fill-box; transform-origin: center;
  animation: botPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(139,92,246,0.9));
}
@keyframes botPulse { 0%, 100% { opacity: 0.65; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.12); } }
.bot-wave {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: botWave 3.2s ease-in-out infinite;
}
@keyframes botWave { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-12deg); } }
.bot-shadow {
  transform-box: fill-box; transform-origin: center;
  animation: botShadow 4.6s ease-in-out infinite;
}
@keyframes botShadow { 0%, 100% { transform: scaleX(1); opacity: 0.32; } 50% { transform: scaleX(0.82); opacity: 0.2; } }
.robot-grid {
  position: absolute; inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(238,126,34,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,153,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(500px) rotateX(60deg) translateY(120px) scale(2.2);
  opacity: 0.6;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .robot-window { transition: none; }
  .bot-float, .bot-eye, .bot-smile, .bot-chest-core, .bot-antenna-tip, .bot-wave, .bot-shadow { animation: none; }
  .bot-gaze, .bot-head { transition: none; }
}

/* =========================================================
   §D · LEGAL PAGES — Terms & Privacy (terms.html, privacy.html)
   Reuses .article-body but suppresses the editorial drop-cap.
   ========================================================= */
.article-body.legal > p:first-of-type::first-letter {
  font-family: var(--font);
  font-size: 1em;
  line-height: inherit;
  float: none;
  padding: 0;
  color: var(--neutral-600);
}
.legal-meta {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 28px;
}
.article-body.legal h2 { scroll-margin-top: 110px; }
.legal-callout {
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--brand);
  background: var(--neutral-100);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-600);
}
.legal-callout strong { color: var(--primary); }

/* =========================================================
   §E · CAREERS — job vacancy list (careers.html)
   ========================================================= */
.careers-list { display: grid; gap: 16px; }
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 24px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: 28px clamp(20px, 3vw, 32px);
  text-decoration: none;
  color: var(--primary);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.job:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.14);
  border-color: rgba(238,126,34,0.35);
}
.job-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.job-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--primary);
  line-height: 1.2;
}
.job-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--neutral-500);
  margin-top: 8px;
}
.job-apply {
  align-self: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-deep);
  white-space: nowrap;
  transition: transform 0.25s ease;
}
.job:hover .job-apply { transform: translateX(4px); }
.job-desc {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-600);
  max-width: 72ch;
}

/* =========================================================
   §F · JOB DETAIL (jobs/*.html)
   ========================================================= */
/* Hero meta chips (on the dark page-hero) */
.job-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--neutral-200);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 99px; padding: 7px 14px;
}
.chip svg { width: 14px; height: 14px; color: var(--brand); }
.chip.is-salary {
  color: #ffd9b3; border-color: rgba(238,126,34,0.45); background: rgba(238,126,34,0.14);
}
.chip.is-salary svg { color: #ffb066; }

/* Two-column body: main + sticky aside */
.job-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 64.0625em) {
  .job-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}
.job-main > h2 {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.02em;
  color: var(--primary); margin: 40px 0 14px;
}
.job-main > h2:first-child { margin-top: 0; }
.job-main > p { color: var(--neutral-600); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.job-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-500); margin: 22px 0 10px; }

/* Checklist (responsibilities / requirements) — BrandTelligence bracketed icons.
   Matches the brand icon language (Icon_Location.svg / Icon_Phone.svg):
     • Diagonally paired corner brackets — TL+BR teal, TR+BL orange.
     • Centre = orange check  (job-checklist:        What you'll do / bring)
     • Centre = teal "+"       (job-checklist.is-plus: Nice to have)
   Pure CSS data-URI SVG — no HTML changes, all 6 job pages inherit. */
.job-checklist { list-style: none; display: grid; gap: 14px; margin: 6px 0 10px; padding: 0; }
.job-checklist li {
  position: relative;
  padding-left: 44px;
  min-height: 28px;
  color: var(--neutral-700);
  font-size: 15.5px;
  line-height: 1.6;
}
.job-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke-width='1.8' stroke-linecap='round'><path d='M9 1.4 H4.4 A3 3 0 0 0 1.4 4.4 V9' stroke='%230d9499'/><path d='M15 1.4 H19.6 A3 3 0 0 1 22.6 4.4 V9' stroke='%23ee7e22'/><path d='M15 22.6 H19.6 A3 3 0 0 0 22.6 19.6 V15' stroke='%230d9499'/><path d='M9 22.6 H4.4 A3 3 0 0 1 1.4 19.6 V15' stroke='%23ee7e22'/></g><path d='M7 12.3 L10.5 15.7 L17 9.2' fill='none' stroke='%23ee7e22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.job-checklist li::after { content: none; }
.job-checklist.is-plus li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke-width='1.8' stroke-linecap='round'><path d='M9 1.4 H4.4 A3 3 0 0 0 1.4 4.4 V9' stroke='%230d9499'/><path d='M15 1.4 H19.6 A3 3 0 0 1 22.6 4.4 V9' stroke='%23ee7e22'/><path d='M15 22.6 H19.6 A3 3 0 0 0 22.6 19.6 V15' stroke='%230d9499'/><path d='M9 22.6 H4.4 A3 3 0 0 1 1.4 19.6 V15' stroke='%23ee7e22'/></g><path d='M12 7.2 V16.8 M7.2 12 H16.8' fill='none' stroke='%230d9499' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.job-checklist.is-plus li::after { content: none; }

/* Sticky aside — At a glance + apply */
.job-aside { position: sticky; top: 100px; display: grid; gap: 16px; }
.glance { background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 22px; padding: 26px; }
.glance-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-500); margin-bottom: 14px; }
.glance-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--neutral-200); font-size: 14px; }
.glance-row:first-of-type { border-top: 0; padding-top: 0; }
.glance-row .k { color: var(--neutral-500); }
.glance-row .v { color: var(--primary); font-weight: 600; text-align: right; }
.glance .tf-btn { margin-top: 20px; }
.job-share { display: flex; align-items: center; gap: 10px; }
.job-share span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-500); }
.job-share a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--neutral-200); display: grid; place-items: center; color: var(--neutral-600); transition: color .25s, border-color .25s; }
.job-share a:hover { color: var(--brand); border-color: rgba(238,126,34,0.4); }
.job-share svg { width: 16px; height: 16px; }

/* Hiring process stepper */
.hiring-steps { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 48em) { .hiring-steps { grid-template-columns: repeat(5, 1fr); gap: 8px; } }
.hstep { position: relative; }
.hstep .num {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  position: relative; z-index: 1; margin-bottom: 14px;
  box-shadow: 0 8px 20px -8px rgba(238,126,34,0.5);
}
@media (min-width: 48em) {
  .hstep::before { content: ''; position: absolute; top: 21px; left: 44px; right: -8px; height: 2px; background: var(--neutral-200); }
  .hstep:last-child::before { display: none; }
}
.hstep .dur { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.hstep h4 { font-size: 16px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.hstep p { font-size: 14px; color: var(--neutral-600); line-height: 1.55; }

/* First-year milestones (vertical timeline) */
.milestones { display: grid; }
.milestone { position: relative; padding: 0 0 26px 40px; }
.milestone::before { content: ''; position: absolute; left: 7px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--brand); z-index: 1; }
.milestone::after { content: ''; position: absolute; left: 15px; top: 18px; bottom: 0; width: 2px; background: var(--neutral-200); }
.milestone:last-child { padding-bottom: 0; }
.milestone:last-child::after { display: none; }
.milestone .when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.milestone h4 { font-size: 17px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.milestone p { font-size: 14.5px; color: var(--neutral-600); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .job:hover .job-apply { transform: none; }
}

/* =================================================================
   ABOUT PAGE
   ================================================================= */

/* 1 · Hero — dark, atmospheric */
.about-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  border-radius: 40px;
  margin: 116px 16px 0;          /* clear the fixed header so the hero sits below the nav */
  padding: clamp(48px, 8vh, 92px) 24px;
  background:
    radial-gradient(58% 80% at 16% 18%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 62%),
    radial-gradient(55% 78% at 86% 80%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 62%),
    var(--primary);
}
.about-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 28%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 38%, #000 28%, transparent 80%);
  pointer-events: none;
}
.about-hero .inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.about-hero .ah-quote {
  display: inline-block;
  font-style: italic;
  color: var(--neutral-300);
  font-size: 15px; letter-spacing: .01em;
  margin-bottom: 20px;
}
.about-hero h1 {
  color: #fff;
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: 1.03; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 20px;
}
.about-hero h1 .accent { color: var(--brand); -webkit-text-fill-color: var(--brand); }
.about-hero .ah-sub {
  color: var(--neutral-300);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
  max-width: 62ch; margin: 0 auto 36px;
}
.about-hero .ah-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 2 · Who We Are — capability chips */
.wwa-icons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.wwa-ico {
  display: flex; align-items: center; gap: 13px;
  flex: 1; min-width: 220px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  box-shadow: 0 3px 10px -6px color-mix(in srgb, var(--hub, var(--brand)) 40%, transparent);
}
.wwa-ico svg { width: 32px; height: 32px; flex: none; }
.wwa-ico .lbl { font-weight: 600; color: var(--primary); font-size: 15px; line-height: 1.2; }
.wwa-ico .lbl span { display: block; margin-top: 3px; font-weight: 400; color: var(--neutral-500); font-size: 12.5px; }

/* 3 · What We Do — 2x2 pillar grid (overrides cap-grid's 3-col) */
@media (min-width: 40em) {
  .cap-grid.about-pillars { grid-template-columns: 1fr 1fr; }
}

/* 6 · Where We Operate — micro-stats */
.hub-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.hub-stats .stat {
  flex: 1; min-width: 180px; text-align: center;
  padding: 24px 16px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
}
.hub-stats .stat .n {
  font-size: clamp(32px, 3.6vw, 44px); font-weight: 700;
  letter-spacing: -.02em; color: var(--primary); line-height: 1;
}
.hub-stats .stat .n .u { color: var(--brand); }
.hub-stats .stat .l {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neutral-500);
}

/* 7 · Partner With Us — centered CTA inside the dark contact panel */
.section-contact.contact-center { text-align: center; }
.section-contact.contact-center .ah-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px;
}
.section-contact.contact-center .promise {
  margin: 30px 0 0; font-size: 14px; letter-spacing: .03em; color: var(--neutral-400);
}
.section-contact.contact-center .promise strong { color: var(--brand); }

@media (max-width: 64em) {
  .about-hero { border-radius: 24px; margin: 108px 8px 0; padding: clamp(44px, 7vh, 64px) 20px; }
}

/* =================================================================
   SERVICES PAGE
   ================================================================= */

/* Dark-hero mono eyebrow (shared with .about-hero) */
.about-hero .ah-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--neutral-300); margin-bottom: 20px;
}
.about-hero .ah-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px var(--brand);
}

/* Hero value-chain: idea → build → staff → deliver (travelling highlight) */
.svc-chain {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(10px, 2.4vw, 26px); flex-wrap: wrap;
  margin: 30px auto 28px; max-width: 620px;
}
.svc-step {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--neutral-500);
  animation: svcStep 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
.svc-step svg {
  width: clamp(34px, 4.6vw, 44px); height: clamp(34px, 4.6vw, 44px);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.svc-step em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.svc-arrow { color: var(--neutral-600); font-size: 20px; line-height: 1; margin-top: 8px; }
@keyframes svcStep {
  0%, 100% { color: var(--neutral-500); transform: translateY(0) scale(1); filter: none; }
  6%       { color: var(--brand); transform: translateY(-4px) scale(1.12);
             filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 55%, transparent)); }
  22%      { color: var(--neutral-500); transform: none; filter: none; }
}
.svc-tag {
  color: var(--neutral-400); font-size: 14px; letter-spacing: .01em;
  max-width: 54ch; margin: 0 auto 34px;
}

/* Capabilities — hover-reveal "in practice" example + alternating accent */
.cap-grid .features-item:nth-child(odd)  { --hub: var(--brand); }
.cap-grid .features-item:nth-child(even) { --hub: var(--brand-2); }
.cap-grid .features-item { position: relative; }
.cap-grid .cap-eg {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-500);
  max-height: 0; opacity: 0; overflow: hidden; border-top: 1px dashed transparent;
  transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease, padding-top .3s ease, border-color .3s ease;
}
.cap-grid .cap-eg strong { color: var(--hub, var(--brand)); font-weight: 600; }
.cap-grid .features-item:hover .cap-eg,
.cap-grid .features-item:focus-within .cap-eg {
  max-height: 90px; opacity: 1; margin-top: 14px; padding-top: 12px;
  border-top-color: var(--neutral-200);
}
.cap-trust {
  text-align: center; max-width: 64ch; margin: 52px auto 0;
  font-size: 15px; color: var(--neutral-600);
}
.cap-trust strong { color: var(--primary); font-weight: 600; }

/* Process — dual-hub note on global stages + closing micro-CTA */
.process-card .global-note {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neutral-500);
}
.process-card .global-note .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-2); box-shadow: 0 0 6px color-mix(in srgb, var(--brand-2) 60%, transparent);
}
.process-cta {
  text-align: center; margin: 44px auto 0; font-size: 15px; color: var(--neutral-600);
}
.process-cta a { color: var(--brand); font-weight: 600; }

/* Engagement — link inside the centered contact promise line */
.section-contact.contact-center .promise a { color: var(--brand); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .svc-step { animation: none; color: var(--neutral-400); }
}

/* =================================================================
   JOURNAL — Recent Posts sidebar widget
   ================================================================= */
.rp-widget { background: var(--neutral-100); border-radius: 20px; padding: 8px 24px 16px; }
.rp-head {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin: 16px 0 4px;
}
.rp-list { display: flex; flex-direction: column; }
.recent-post {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--neutral-200);
}
.recent-post:first-of-type { border-top: 0; }
.rp-num {
  width: 46px; aspect-ratio: 1 / 1; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: -.02em;
  box-shadow: 0 5px 12px -5px color-mix(in srgb, var(--brand) 50%, transparent);
}
.rp-num.a { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.rp-num.b { background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.rp-meta { min-width: 0; }   /* lets the title clamp instead of overflowing the grid */
.rp-date {
  display: block; font-size: 11px; color: var(--neutral-500); font-weight: 600;
  letter-spacing: .05em; margin-bottom: 3px;
}
.rp-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 600; color: var(--primary); line-height: 1.35;
  transition: color .2s ease;
}
.recent-post:hover .rp-title { color: var(--brand); }

/* Journal feed — in the horizontal cards the image is a side column; let it fill the
   full card height so there's no white gap below the gradient when the text is taller. */
@media (min-width: 64.0625em) {
  .blog-card:not(.feat) .image,
  .blog-card.feat .image { aspect-ratio: auto; height: 100%; min-height: 220px; }
}
/* Below desktop, stack the journal layout so nothing gets crushed on tablets/phones.
   These override inline grid/position styles without touching the markup. */
@media (max-width: 64em) {
  /* main feed+sidebar grid → single column (sidebar drops below the feed) */
  [style*="grid-template-columns: 1fr 320px"] { grid-template-columns: 1fr !important; }
  aside[style*="position: sticky"] { position: static !important; }
  /* horizontal row cards → image over content */
  .blog-card:not(.feat) { grid-template-columns: 1fr !important; }
}

/* =================================================================
   PRODUCTS — diagnostic devices + test kits (WhatsApp sales)
   ================================================================= */
/* hero trust badges (on the dark .about-hero) */
.trust-badges { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; }
.trust-badges span {
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--neutral-300); border:1px solid rgba(255,255,255,.18); border-radius:99px;
  padding:7px 14px; display:inline-flex; align-items:center; gap:7px;
}
.trust-badges span::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--brand-2); }

/* WhatsApp buttons */
.wa-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:#25d366; color:#fff; font-weight:700; font-size:14px; line-height:1;
  padding:11px 16px; border-radius:12px; text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 6px 16px -6px rgba(37,211,102,.5);
}
.wa-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow:0 10px 22px -8px rgba(37,211,102,.6); }
.wa-btn svg { width:18px; height:18px; fill: currentColor; flex:none; }
.wa-btn.block { width:100%; }
.wa-btn.sm { font-size:12.5px; padding:9px 13px; gap:7px; }
.wa-btn.sm svg { width:15px; height:15px; }
.wa-btn.ghost { background: color-mix(in srgb, #25d366 12%, transparent); color:#1a8f4e; box-shadow:none; border:1px solid color-mix(in srgb, #25d366 34%, transparent); }
.wa-btn.ghost:hover { background: color-mix(in srgb, #25d366 20%, transparent); }
.wa-row { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.wa-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-500); margin-bottom:2px; }
/* WhatsApp brand icon — replaces the inline glyph on every .wa-btn */
.wa-btn svg { display: none; }
.wa-btn::before {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("/assets/images/whatsapp.svg") center / contain no-repeat;
}
.wa-btn.sm::before, .wa-btn.xs::before { width: 16px; height: 16px; }

/* device cards */
.product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.product-card {
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--neutral-200); border-radius:22px; overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow:0 22px 48px -22px rgba(0,0,0,.18); }
.pimg {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background: radial-gradient(circle at 50% 32%, #ffffff, #e8f3f4 78%);
  display:flex; align-items:center; justify-content:center;
}
.pimg svg { width:42%; height:42%; fill:none; stroke: var(--brand-2); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pimg .pimg-tag {
  position:absolute; bottom:12px; left:12px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--neutral-500); background:rgba(255,255,255,.82); padding:5px 9px; border-radius:99px;
}
.product-card .pbody { padding:24px; display:flex; flex-direction:column; flex:1; }
.product-card .ptag { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2); margin-bottom:8px; }
.product-card h3 { font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--primary); margin-bottom:14px; line-height:1.2; }
.product-card h3:has(+ .psub) { margin-bottom:4px; }
.product-card .psub { font-size:13.5px; font-weight:500; color:var(--neutral-500); line-height:1.45; margin:0 0 16px; }
.product-card .pfeat { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.product-card .pfeat li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--neutral-600); line-height:1.45; }
.product-card .pfeat li::before {
  content:"✓"; flex:none; width:18px; height:18px; margin-top:1px; border-radius:6px;
  background: color-mix(in srgb, var(--brand-2) 14%, transparent); color: var(--brand-2);
  font-size:11px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center;
}
/* device card image gallery — main image + thumbnail strip */
.product-card .pthumbs { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; padding:6px; background:#eef5f6; }
.product-card .pthumb { aspect-ratio:4/3; border-radius:8px; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 38%, #ffffff, #e1eef0 82%); }
.product-card .pthumb svg { width:34%; height:34%; fill:none; stroke: color-mix(in srgb, var(--brand-2) 55%, #aab4bd); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* compact WhatsApp buttons (2-up) */
.wa-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.wa-btn.xs { font-size:12px; padding:8px 9px; gap:5px; border-radius:10px; }
.wa-btn.xs svg { width:16px; height:16px; }

/* add-on groups */
.addon-group { margin-top:44px; }
.addon-group .ag-head h3 { font-size:20px; font-weight:600; color:var(--primary); letter-spacing:-.01em; margin-bottom:4px; }
.addon-group .ag-head p { font-size:13.5px; color:var(--neutral-500); }
.addon-sub { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2); margin:22px 0 12px; }
.addon-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:16px; margin-top:14px; }
/* add-on cards now match the device product-card style: image + name + desc + WhatsApp CTA */
.addon-card { background:var(--white); border:1px solid var(--neutral-200); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease; }
.addon-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.16); }
.addon-card .aimg { aspect-ratio:16/10; position:relative; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 38%, #ffffff, #e1eef0 82%); }
.addon-card .aimg svg { width:30%; height:30%; fill:none; stroke: var(--brand-2); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.addon-card .aimg-tag { position:absolute; bottom:8px; left:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-500); background:rgba(255,255,255,.82); padding:4px 7px; border-radius:99px; }
.addon-card .ac-pad { padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.addon-card .ac-name { font-size:14px; font-weight:700; color:var(--primary); line-height:1.25; }
.addon-card .ac-desc { font-size:12px; color:var(--neutral-600); line-height:1.45; flex:1; }
.addon-card .wa-stack { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.addon-card .wa-stack .wa-btn { padding:8px 5px; font-size:11px; gap:4px; }
.addon-card .wa-stack .wa-btn svg { width:15px; height:15px; }
.addon-group .ag-action { margin-top:18px; }

/* bulk + sourcing */
.bulk-card { background:var(--primary); color:#fff; border-radius:28px; padding:clamp(28px,4vw,52px); margin:0 8px; position:relative; overflow:hidden; }
.bulk-card .bk-eye { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.bulk-card h2 { font-size:clamp(24px,2.6vw,34px); font-weight:600; letter-spacing:-.02em; max-width:26ch; margin:10px 0 14px; color:#fff; }
.bulk-card p { color:var(--neutral-300); font-size:16px; line-height:1.6; max-width:62ch; margin-bottom:24px; }
.bulk-card .light-top { position:absolute; top:-40%; right:-10%; width:60%; height:140%; background:radial-gradient(circle, rgba(238,126,34,.18), transparent 60%); pointer-events:none; }

/* global sales contacts */
.sales-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; max-width: 700px; margin-left:auto; margin-right:auto; }
.sales-card { background:var(--white); border:1px solid var(--neutral-200); border-radius:20px; padding:28px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.sales-card .flag { font-size:34px; line-height:1; margin-bottom:10px; }
.sales-card h3 { font-size:18px; font-weight:600; color:var(--primary); margin-bottom:4px; }
.sales-card p { font-size:13px; color:var(--neutral-500); margin-bottom:16px; }

/* floating WhatsApp bubble (persistent) */
.wa-fab {
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.65); transition:transform .2s ease;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width:30px; height:30px; fill:#fff; }

@media (max-width: 64em) {
  .product-grid, .sales-grid { grid-template-columns: 1fr; }
}
@media (min-width: 40em) and (max-width: 64em) {
  .product-grid, .sales-grid { grid-template-columns: 1fr 1fr; }
}

/* Product photos (admin-managed) override placeholder icons */
.pimg-photo, .aimg-photo { width:100%; height:100%; object-fit:contain; padding:18px; border-radius:inherit; display:block; }
.pimg:has(img.pimg-photo) > svg, .pimg:has(img.pimg-photo) .pimg-tag { display:none; }
.aimg:has(img.aimg-photo) > svg, .aimg:has(img.aimg-photo) .aimg-tag { display:none; }
/* No-image test-kit cards → the standard image placeholder icon */
.addon-card .aimg > svg { display: none; }
.addon-card .aimg-tag { display: none; }
.addon-card .aimg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: url("/assets/images/image-placeholder.svg") center / 30% no-repeat;
}
.addon-card .aimg:has(img.aimg-photo)::after { display: none; }

.pthumb-photo { width:100%; height:100%; object-fit:contain; padding:6px; display:block; }

/* ===== B2B gating: public catalogue cards · access banner · portal bar ===== */
.b2b-gate {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 9%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--brand-2) 22%, transparent);
  border-radius: 18px; padding: 22px 24px; margin: 0 auto 40px; max-width: 920px;
}
.b2b-gate.vert { flex-direction: column; align-items: flex-start; }
.b2b-gate-txt { display: flex; flex-direction: column; gap: 4px; }
.b2b-gate-txt strong { font-size: 15px; color: var(--primary); }
.b2b-gate-txt span { font-size: 13.5px; color: var(--neutral-600); line-height: 1.5; max-width: 62ch; }
.b2b-gate-cta { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }

.product-card.pub-card { text-decoration: none; color: inherit; cursor: pointer; }
.product-card.pub-card .pbody { padding: 20px 24px 24px; }
.product-card.pub-card h3 { margin-bottom: 8px; }
.pub-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-2); }

/* Contact page — direct-to-country-head WhatsApp CTA below the form */
.cf-direct { max-width: 560px; margin: 30px auto 0; text-align: center; }
.cf-direct-head { font-size: 20px; font-weight: 600; color: var(--primary); margin: 0 0 4px; }
.cf-direct-sub { font-size: 14px; color: var(--neutral-600); margin: 0 0 16px; }
.cf-direct .wa-grid { max-width: 420px; margin: 0 auto; }
.pub-lock svg { width: 14px; height: 14px; flex: none; }

.portal-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 200;
  display: flex; align-items: center; gap: 12px;
  background: rgba(9,9,11,0.92); color: #fff;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 7px 8px 7px 16px; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); font-size: 13px;
}
.portal-fab-tag { font-weight: 700; letter-spacing: .01em; color: color-mix(in srgb, var(--brand-2) 55%, #fff); white-space: nowrap; }
.portal-fab-btn { border: 0; cursor: pointer; background: var(--brand); color: #fff; font-weight: 700; font-size: 12.5px; padding: 7px 15px; border-radius: 999px; }
.portal-fab-btn:hover { filter: brightness(1.06); }
@media (max-width: 30em) { .portal-fab-tag { display: none; } }

/* Product detail page */
.pd-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 64.0625em){ .pd-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } }
.pd-main { aspect-ratio: 4/3; background: var(--neutral-100); border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-noimg { color: var(--neutral-400); font-family: var(--font-mono); font-size: 13px; }
.pd-main img.pd-ph { width: 38%; max-width: 100px; height: auto; object-fit: contain; opacity: 0.6; }   /* no-image placeholder icon */
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb { width: 84px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--neutral-100); border: 1px solid var(--neutral-200); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-body { color: var(--neutral-600); font-size: 16px; line-height: 1.65; margin: 18px 0; }
.pd-link { display: inline-block; margin: 4px 0 14px; color: var(--brand); font-weight: 600; font-size: 14px; text-decoration: none; }
.ac-detail { display: inline-block; margin: 6px 0 10px; color: var(--brand); font-weight: 600; font-size: 12.5px; text-decoration: none; }

/* Product specifications box */
.pd-specs { border: 1px solid var(--neutral-200); border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.pd-specs-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-bottom: 10px; }
.pd-spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--neutral-100); font-size: 14px; }
.pd-spec-row:last-child { border-bottom: 0; }
.pd-spec-row .k { color: var(--neutral-500); }
.pd-spec-row .v { color: var(--primary); font-weight: 600; text-align: right; }

/* Glossary / FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--neutral-200); border-radius: 14px; background: #fff; padding: 0 20px; transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--neutral-200)); box-shadow: 0 12px 30px -16px rgba(9,9,11,0.18); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 17px; color: var(--primary); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; font-weight: 300; line-height: 1; color: var(--brand); transition: transform .25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 18px; color: var(--neutral-600); font-size: 15px; line-height: 1.65; max-width: 72ch; }

/* ===== Image lightbox — click product images to view full size ===== */
.pd-media img:not(.pd-ph) { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(9, 9, 11, 0.92);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(94vw, 1200px); max-height: 90vh;
  border-radius: 12px; object-fit: contain; cursor: zoom-out;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.7);
  transform: scale(0.96); transition: transform .25s ease;
}
.lightbox.open img { transform: scale(1); }
.lightbox-btn {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.10);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s ease; line-height: 1;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }
.lightbox-btn[hidden] { display: none; }
body.lb-open { overflow: hidden; }