/* ============================================
   NEXUS - Modern Website Styles
   ============================================ */

:root {
  --bg: #f6f1e8;
  --surface: rgba(255, 253, 249, 0.78);
  --surface-strong: #fffdf9;
  --surface-muted: #efe7da;
  --surface-dark: rgba(18, 31, 47, 0.78);
  --color-coral: #FF6767;
  --color-coral-light: #FFA575;
  --color-coral-dark: #E55A5A;
  --color-navy: #0C1626;
  --color-navy-light: #1A2840;
  --ink: var(--color-navy);
  --ink-soft: #516073;
  --white: #ffffff;
  --dark: var(--color-navy);
  --dark-alt: var(--color-navy-light);
  --dark-card: #22324a;
  --accent: var(--color-coral);
  --accent-strong: var(--color-coral-dark);
  --accent-soft: #ffd0c0;
  --gold: #f1ab4f;
  --success: #33c481;
  --line: rgba(18, 34, 56, 0.1);
  --line-dark: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 14px 40px rgba(14, 25, 39, 0.08);
  --shadow-md: 0 20px 60px rgba(14, 25, 39, 0.14);
  --shadow-lg: 0 28px 80px rgba(10, 20, 33, 0.24);
  --gradient-accent: linear-gradient(135deg, var(--color-coral-light) 0%, var(--color-coral) 52%, var(--color-coral-dark) 100%);
  --gradient-dark: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-light) 50%, #243754 100%);
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-display: "DM Sans", "Segoe UI", sans-serif;
  --transition: 0.28s ease;
  --max-width: 1240px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  /* Global brand backdrop — applies to every page. Cream base + the N
     watermark sitting in the upper-right, plus subtle coral radial accents
     in the corners so it doesn't feel flat. */
  background-color: #F7F7F8;
  background-image:
    radial-gradient(circle at top left, rgba(255, 165, 117, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(255, 103, 103, 0.10), transparent 26%),
    url('/Background/White.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, top center;
  background-size: auto, auto, 100% auto;
  background-attachment: scroll, scroll, scroll;
}

body.modal-open {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  width: min(100% - 48px, var(--max-width));
  margin: 0 auto;
}

section,
footer {
  position: relative;
}

section {
  padding: 112px 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 103, 103, 0.22);
  border-radius: 999px;
  background: rgba(255, 103, 103, 0.1);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 3vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 760px;
  margin-bottom: 20px;
  text-wrap: balance;
}

.section-title .highlight {
  color: var(--accent);
}

.section-title .highlight-orange {
  color: var(--gold);
}

.section-desc {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.light-section {
  background: transparent;
}

.gray-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(239, 231, 218, 0.72) 100%);
}

.dark-section {
  background:
    radial-gradient(circle at top left, rgba(255, 103, 103, 0.18), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255, 165, 117, 0.12), transparent 30%),
    var(--gradient-dark);
  color: var(--white);
}

.dark-section .section-desc {
  color: rgba(232, 238, 245, 0.76);
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: 18px 0;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 103, 103, 0.18);
  backdrop-filter: blur(18px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.navbar.scrolled .container {
  background: rgba(255, 253, 249, 0.88);
  border-color: rgba(18, 34, 56, 0.08);
  box-shadow: 0 16px 48px rgba(11, 21, 35, 0.1);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1001;
}

.navbar-logo .logo-full {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter var(--transition);
}

.navbar-logo .logo-icon {
  display: none;
  height: 36px;
  width: auto;
}

.navbar.scrolled .logo-full {
  filter: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-utility-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  padding-left: 12px;
}

.nav-links a {
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.navbar.scrolled .nav-links a {
  color: var(--ink);
}

.language-picker {
  position: relative;
}

.language-picker summary {
  list-style: none;
}

.language-picker summary::-webkit-details-marker {
  display: none;
}

.language-trigger,
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.language-trigger {
  cursor: pointer;
}

.navbar.scrolled .language-trigger,
.navbar.scrolled .nav-login {
  color: var(--ink);
}

.language-trigger:hover,
.nav-login:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.navbar.scrolled .language-trigger:hover,
.navbar.scrolled .nav-login:hover {
  background: rgba(18, 34, 56, 0.06);
  color: var(--accent);
}

.flag-badge {
  position: relative;
  width: 24px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(12, 22, 38, 0.08);
}

.flag-my {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='240' height='160' rx='0'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='240' height='160' fill='%23fff'/%3E%3Cg fill='%23cc0001'%3E%3Crect width='240' height='11.43'/%3E%3Crect y='22.86' width='240' height='11.43'/%3E%3Crect y='45.71' width='240' height='11.43'/%3E%3Crect y='68.57' width='240' height='11.43'/%3E%3Crect y='91.43' width='240' height='11.43'/%3E%3Crect y='114.29' width='240' height='11.43'/%3E%3Crect y='137.14' width='240' height='11.43'/%3E%3C/g%3E%3Crect width='120' height='91.43' fill='%23010066'/%3E%3Ccircle cx='60' cy='45.7' r='28' fill='%23ffcc00'/%3E%3Ccircle cx='68' cy='45.7' r='23' fill='%23010066'/%3E%3Cpolygon fill='%23ffcc00' points='60,18 63.5,28.5 74.5,28.5 65.5,34.5 69,45 60,39 51,45 54.5,34.5 45.5,28.5 56.5,28.5' transform='translate(12,-2) scale(0.7)'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}

.flag-us {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Crect width='240' height='160' rx='0'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23b)'%3E%3Crect width='240' height='160' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='240' height='12.3'/%3E%3Crect y='24.6' width='240' height='12.3'/%3E%3Crect y='49.2' width='240' height='12.3'/%3E%3Crect y='73.8' width='240' height='12.3'/%3E%3Crect y='98.5' width='240' height='12.3'/%3E%3Crect y='123.1' width='240' height='12.3'/%3E%3Crect y='147.7' width='240' height='12.3'/%3E%3C/g%3E%3Crect width='96' height='86.2' fill='%233c3b6e'/%3E%3Cg fill='%23fff' transform='translate(48,43.1)'%3E%3Cg id='s'%3E%3Cpolygon points='0,-12 3.5,-4 11.4,-4 5.2,1.5 7,9.7 0,5 -7,9.7 -5.2,1.5 -11.4,-4 -3.5,-4' transform='scale(0.45)'/%3E%3C/g%3E%3Cuse href='%23s' x='-16' y='-14'/%3E%3Cuse href='%23s' x='0' y='-14'/%3E%3Cuse href='%23s' x='16' y='-14'/%3E%3Cuse href='%23s' x='-32' y='-14'/%3E%3Cuse href='%23s' x='32' y='-14'/%3E%3Cuse href='%23s' x='-16' y='0'/%3E%3Cuse href='%23s' x='16' y='0'/%3E%3Cuse href='%23s' x='-32' y='0'/%3E%3Cuse href='%23s' x='32' y='0'/%3E%3Cuse href='%23s' x='-16' y='14'/%3E%3Cuse href='%23s' x='0' y='14'/%3E%3Cuse href='%23s' x='16' y='14'/%3E%3Cuse href='%23s' x='-32' y='14'/%3E%3Cuse href='%23s' x='32' y='14'/%3E%3Cuse href='%23s' x='-24' y='-7'/%3E%3Cuse href='%23s' x='-8' y='-7'/%3E%3Cuse href='%23s' x='8' y='-7'/%3E%3Cuse href='%23s' x='24' y='-7'/%3E%3Cuse href='%23s' x='-24' y='7'/%3E%3Cuse href='%23s' x='-8' y='7'/%3E%3Cuse href='%23s' x='8' y='7'/%3E%3Cuse href='%23s' x='24' y='7'/%3E%3Cuse href='%23s' x='-24' y='-21'/%3E%3Cuse href='%23s' x='-8' y='-21'/%3E%3Cuse href='%23s' x='8' y='-21'/%3E%3Cuse href='%23s' x='24' y='-21'/%3E%3Cuse href='%23s' x='-24' y='21'/%3E%3Cuse href='%23s' x='-8' y='21'/%3E%3Cuse href='%23s' x='8' y='21'/%3E%3Cuse href='%23s' x='24' y='21'/%3E%3Cuse href='%23s' x='-24' y='-28'/%3E%3Cuse href='%23s' x='-8' y='-28'/%3E%3Cuse href='%23s' x='8' y='-28'/%3E%3Cuse href='%23s' x='24' y='-28'/%3E%3Cuse href='%23s' x='-16' y='-28'/%3E%3Cuse href='%23s' x='0' y='-28'/%3E%3Cuse href='%23s' x='16' y='-28'/%3E%3Cuse href='%23s' x='-32' y='-28'/%3E%3Cuse href='%23s' x='32' y='-28'/%3E%3Cuse href='%23s' x='-24' y='28'/%3E%3Cuse href='%23s' x='-8' y='28'/%3E%3Cuse href='%23s' x='8' y='28'/%3E%3Cuse href='%23s' x='24' y='28'/%3E%3Cuse href='%23s' x='-16' y='28'/%3E%3Cuse href='%23s' x='0' y='28'/%3E%3Cuse href='%23s' x='16' y='28'/%3E%3Cuse href='%23s' x='-32' y='28'/%3E%3Cuse href='%23s' x='32' y='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}

.language-code {
  letter-spacing: 0.06em;
}

.language-trigger svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
  transition: transform var(--transition);
}

.language-picker[open] .language-trigger svg {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(18, 34, 56, 0.08);
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 18px 48px rgba(11, 21, 35, 0.16);
}

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}

.language-menu .language-option {
  color: var(--ink) !important;
}

.language-option:hover {
  background: rgba(18, 34, 56, 0.06);
  color: var(--ink) !important;
}

.language-option.active {
  background: rgba(255, 103, 103, 0.1);
  color: var(--accent) !important;
}

.nav-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.22);
}

.navbar.scrolled .nav-divider {
  background: rgba(18, 34, 56, 0.12);
}

.nav-links a:hover,
.nav-links a.active-link {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.active-link {
  background: rgba(18, 34, 56, 0.06);
  color: var(--accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px !important;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  background: var(--gradient-accent) !important;
  color: var(--white) !important;
  box-shadow: 0 14px 32px rgba(255, 109, 61, 0.24);
  transition: transform var(--transition), box-shadow var(--transition);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(255, 109, 61, 0.3);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 999px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

.navbar.scrolled .menu-toggle span {
  background: var(--ink);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100svh;
  padding: 156px 0 88px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2), transparent 16%),
    radial-gradient(circle at 18% 22%, rgba(255, 165, 117, 0.34), transparent 22%),
    linear-gradient(315deg, #ffbf8e 0%, var(--color-coral-light) 18%, var(--color-coral) 46%, var(--color-coral-dark) 72%, var(--color-navy-light) 132%);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto auto -26% -12%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 640px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 5.75rem);
  font-weight: 700;
  color: var(--white);
  line-height: 0.96;
  letter-spacing: -0.065em;
  margin-bottom: 22px;
}

.hero p {
  max-width: 560px;
  margin-bottom: 34px;
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(241, 245, 249, 0.84);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}

.trust-badge {
  font-size: 0.85rem;
  color: #FFFFFF;
  font-weight: 500;
}

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.96rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(10, 20, 33, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px rgba(10, 20, 33, 0.24);
}

.btn-primary.is-accent {
  background: var(--gradient-accent);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(255, 109, 61, 0.28);
  border: 0;
}

.btn-primary.is-accent:hover {
  box-shadow: 0 24px 48px rgba(255, 109, 61, 0.36);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.btn-outline:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}

.hero-image {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: end;
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 10% -5% -8% 8%;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
}

.hero-devices {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 30px;
  transform: translateY(10px);
  filter: drop-shadow(0 28px 55px rgba(7, 17, 31, 0.36));
}

/* ============================================
   OVERVIEW
   ============================================ */
.overview {
  color: var(--white);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 64px;
  align-items: end;
}

.overview-text .section-title {
  max-width: 760px;
}

.overview-tagline {
  margin-top: 36px;
  padding: 28px 30px;
  border: 1px solid var(--line-dark);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overview-tagline h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.overview-tagline p {
  margin-top: 14px;
  color: rgba(232, 238, 245, 0.76);
}

.overview-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: end;
  min-height: 520px;
  overflow: hidden;
}

.overview-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.overview-device {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 26px 48px rgba(7, 17, 31, 0.34));
}

/* ============================================
   CHALLENGES vs SOLUTIONS
   ============================================ */
.challenges {
  color: var(--white);
}

.challenges .section-title {
  text-align: center;
  margin: 0 auto 48px;
}

.comparison-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-dark);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-lg);
}

.comparison-header {
  padding: 22px 28px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--line-dark);
}

.comparison-header.challenge-header {
  color: rgba(232, 238, 245, 0.64);
}

.comparison-header.solution-header {
  color: var(--accent-soft);
}

.comparison-row {
  display: contents;
}

.comparison-cell {
  min-height: 124px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.comparison-cell:nth-last-child(-n + 2) {
  border-bottom: none;
}

.challenge-cell {
  background: rgba(255, 255, 255, 0.03);
}

.solution-cell {
  background: rgba(255, 255, 255, 0.06);
}

.comparison-cell .cell-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.comparison-cell .cell-icon.challenge-icon {
  color: #ff9b75;
  background: rgba(255, 109, 61, 0.12);
}

.comparison-cell .cell-icon.solution-icon {
  color: var(--white);
  background: linear-gradient(135deg, rgba(255, 109, 61, 0.82), rgba(241, 171, 79, 0.78));
}

.cell-content h4 {
  display: inline-flex;
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.challenge-cell .cell-content h4 {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.solution-cell .cell-content h4 {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.cell-content p {
  color: rgba(232, 238, 245, 0.76);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ============================================
   WHO WE EMPOWER
   ============================================ */
.empower {
  text-align: center;
}

.empower .section-title {
  margin: 0 auto 50px;
}

.empower-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.empower-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 206px;
  padding: 28px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.empower-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 140, 87, 0.4);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px rgba(5, 14, 28, 0.24);
}

.diamond-icon {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
}

.diamond-icon svg {
  transform: rotate(-45deg);
  width: 31px;
  height: 31px;
  color: var(--white);
}

.empower-item span {
  color: rgba(255, 248, 244, 0.88);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ============================================
   OUR SOLUTIONS
   ============================================ */
.solutions {
  text-align: center;
}

.solutions .section-label {
  justify-content: center;
}

.solutions .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 54px;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.solution-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: 100%;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.solution-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 109, 61, 0.24);
  box-shadow: var(--shadow-md);
}

.solution-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 20px;
  background: rgba(255, 109, 61, 0.08);
  color: var(--accent);
}

.solution-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.solution-icon svg {
  width: 34px;
  height: 34px;
}

.solution-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.solution-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ============================================
   CORE COMPONENTS — Shared
   ============================================ */
.component-intro {
  padding-bottom: 16px;
  text-align: center;
}

.component-intro .section-label {
  justify-content: center;
}

.component-intro .section-title,
.component-intro .section-desc {
  margin-left: auto;
  margin-right: auto;
}

/* Component Detail Section */
.component-section {
  padding: 88px 0;
}

.component-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
}

.hex-icon {
  position: relative;
  flex-shrink: 0;
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-icon.component-logo {
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 103, 103, 0.12);
  border: 1px solid rgba(255, 103, 103, 0.18);
  box-shadow: var(--shadow-sm);
}

.hex-icon.component-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hex-icon svg.hex-border {
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.hex-icon svg.hex-inner {
  position: absolute;
  width: 42px;
  height: 42px;
}

.dark-section .hex-icon svg.hex-inner {
  color: var(--white);
}

.hex-icon.component-logo svg.hex-border,
.hex-icon.component-logo svg.hex-inner {
  display: none;
}

.light-section .hex-icon svg.hex-inner,
.gray-section .hex-icon svg.hex-inner {
  color: var(--ink);
}

.component-info h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.component-info h2 .nex {
  color: inherit;
}

.component-info h2 .nex-name {
  color: var(--accent);
}

.component-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.light-section .component-badge,
.gray-section .component-badge {
  background: rgba(18, 34, 56, 0.05);
  border: 1px solid rgba(18, 34, 56, 0.08);
  color: var(--ink);
}

.dark-section .component-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 244, 239, 0.92);
}

.component-badge svg {
  width: 16px;
  height: 16px;
  color: var(--success);
}

.component-desc {
  max-width: 760px;
  margin-bottom: 34px;
  font-size: 1.04rem;
  line-height: 1.8;
}

.dark-section .component-desc {
  color: rgba(232, 238, 245, 0.76);
}

.light-section .component-desc,
.gray-section .component-desc {
  color: var(--ink-soft);
}

/* Component showcase — image + function cards layout */
.component-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.component-showcase.showcase-flipped {
  direction: rtl;
}

.component-showcase.showcase-flipped > * {
  direction: ltr;
}

.showcase-image {
  border-radius: 20px;
  overflow: hidden;
  min-height: 340px;
  background: none;
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.showcase-functions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.function-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.dark-section .function-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-dark);
}

.light-section .function-card,
.gray-section .function-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.function-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.function-info h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.25;
  margin-bottom: 6px;
}

.function-info p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.light-section .function-info p,
.gray-section .function-info p {
  color: var(--ink-soft);
}

.dark-section .function-info p {
  color: rgba(232, 238, 245, 0.74);
}

.play-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 109, 61, 0.15);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.play-btn svg {
  width: 18px;
  height: 18px;
}

.play-btn:hover {
  background: rgba(255, 109, 61, 0.3);
  transform: scale(1.1);
}

/* ============================================
   DISCOVER NEXUS
   ============================================ */
.discover {
  background: transparent;
}

.discover .section-title {
  max-width: none;
  margin: 0 auto 48px;
  text-align: center;
}

.discover-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.discover-image {
  overflow: hidden;
  border-radius: 32px;
}

.discover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-grid {
  display: grid;
  gap: 18px;
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 109, 61, 0.2);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 109, 61, 0.08);
  color: var(--accent);
}

.stat-icon svg {
  width: 30px;
  height: 30px;
}

.stat-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.05;
}

.stat-card h3 .highlight {
  color: var(--accent);
}

.stat-card p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ============================================
   MANUAL vs AUTOMATED
   ============================================ */
.manual-auto {
  background:
    radial-gradient(circle at top center, rgba(255, 173, 109, 0.18), transparent 26%),
    linear-gradient(135deg, #101f31 0%, #15263d 48%, #253a5a 100%);
  color: var(--white);
}

.manual-auto .section-title {
  text-align: center;
  margin: 0 auto 50px;
}

.comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.compare-card {
  padding: 32px 30px;
  border-radius: 30px;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
}

.compare-card.traditional {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.compare-card.nexus-card {
  background: rgba(255, 255, 255, 0.04);
}

.compare-card-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
}

.traditional .compare-card-label {
  background: rgba(255, 255, 255, 0.1);
}

.nexus-card .compare-card-label {
  background: rgba(255, 109, 61, 0.16);
  color: #ffd3c3;
}

.compare-list {
  display: grid;
  gap: 15px;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(242, 246, 250, 0.88);
}

.compare-list li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

.traditional .compare-list li svg {
  color: #ffab88;
}

.nexus-card .compare-list li svg {
  color: var(--success);
}

/* ============================================
   SECURITY & SCALABILITY
   ============================================ */
.security {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 20%),
    var(--gradient-accent);
  color: var(--white);
}

.security .section-title {
  max-width: none;
  margin: 0 auto 40px;
  text-align: center;
}

.security-title-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(17, 28, 43, 0.16);
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.security-col {
  padding: 34px 30px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
}

.security-col.sec-left {
  background: rgba(255, 255, 255, 0.16);
}

.security-col.sec-right {
  background: rgba(15, 26, 40, 0.42);
}

.security-col h3 {
  display: inline-flex;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.sec-left h3 {
  background: rgba(255, 255, 255, 0.18);
}

.sec-right h3 {
  background: rgba(255, 255, 255, 0.12);
}

.security-item + .security-item {
  margin-top: 22px;
}

.security-item h4 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.security-item p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

/* ============================================
   DEPLOYMENT STRATEGY
   ============================================ */
.deployment {
  color: var(--white);
  text-align: center;
}

.deployment .section-label {
  margin-left: auto;
  margin-right: auto;
}

.deployment .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.deployment .section-desc {
  text-align: center;
  margin: 0 auto 58px;
}

.timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Connecting line through the top step rail */
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 80px;
  right: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 0;
}

.timeline-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: center;
  gap: 18px;
  flex: 1;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--gradient-accent);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 800;
  transform: rotate(45deg);
  box-shadow: 0 14px 28px rgba(255, 109, 61, 0.28);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.step-number span {
  transform: rotate(-45deg);
}

.step-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  background: linear-gradient(145deg, rgba(34, 50, 74, 0.98) 0%, rgba(26, 40, 64, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 0 12px rgba(26, 40, 64, 0.94);
}

.step-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-soft);
}

.step-card {
  width: 100%;
  padding: 26px 20px;
  border-radius: 26px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-md);
}

.step-card h4 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  margin-bottom: 6px;
}

.step-card .step-subtitle {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent-soft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step-card p {
  color: rgba(232, 238, 245, 0.72);
  font-size: 0.93rem;
}

.deployment-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 64px auto 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.deployment-note svg {
  width: 20px;
  height: 20px;
  color: var(--accent-soft);
}

/* ============================================
   PRICING
   ============================================ */
.pricing {
  background:
    radial-gradient(circle at top left, rgba(255, 165, 117, 0.18), transparent 22%),
    radial-gradient(circle at right 20%, rgba(255, 103, 103, 0.14), transparent 20%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), #fff9f3 100%);
}

.pricing-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.pricing-header .section-title,
.pricing-header .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.billing-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 165, 117, 0.28);
  background: rgba(255, 244, 235, 0.92);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.billing-pill span {
  color: var(--accent);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 30px 30px;
  border-radius: 30px;
  border: 1px solid rgba(255, 165, 117, 0.28);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: var(--shadow-sm);
}

.pricing-card.featured {
  border-color: rgba(255, 103, 103, 0.8);
  box-shadow: 0 28px 72px rgba(255, 109, 61, 0.18);
  transform: translateY(-10px);
}

.pricing-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--gradient-accent);
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 18px 36px rgba(255, 109, 61, 0.26);
}

.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 10px;
}

.pricing-subtitle {
  min-height: 52px;
  color: var(--ink-soft);
  font-size: 1rem;
}

.pricing-price {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 28px 0 24px;
}

.pricing-price strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.35rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.pricing-price span {
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding-bottom: 8px;
}

.pricing-contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 24px;
  color: var(--ink);
}

.pricing-contact svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
}

.pricing-contact strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.pricing-features {
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
}

.pricing-features li {
  position: relative;
  padding-left: 38px;
  color: var(--ink);
  font-size: 1rem;
}

.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.pricing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: auto;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.pricing-button:hover {
  transform: translateY(-2px);
}

.pricing-button-primary {
  background: var(--gradient-accent);
  color: var(--white);
  box-shadow: 0 18px 34px rgba(255, 109, 61, 0.24);
}

.pricing-button-muted {
  background: rgba(245, 235, 223, 0.86);
  color: var(--ink);
}

/* ============================================
   TRUSTED BY
   ============================================ */
.trusted-by {
  padding: 80px 0;
  background: var(--sand-light, #fdf8f3);
  overflow: hidden;
}

.trusted-header {
  text-align: center;
  margin-bottom: 48px;
}

.trusted-header .section-title,
.trusted-header .section-desc {
  margin-inline: auto;
}

.logo-carousel {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-track {
  display: flex;
  gap: 72px;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  cursor: default;
}

.logo-item img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.logo-item:hover img {
  filter: grayscale(0) opacity(1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.logo-item span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted, #6b7280);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}

.logo-item:hover span {
  color: var(--ink, #1a1a2e);
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   FAQ
   ============================================ */
.faq {
  padding: 96px 0;
  background:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.25), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(255, 180, 100, 0.3), transparent 50%),
    linear-gradient(135deg, #ff8a65 0%, #ff6b6b 50%, #ff5252 100%);
  color: var(--white);
}

.faq-header {
  text-align: center;
  margin-bottom: 48px;
}

.faq-header .section-title {
  color: #fff;
  margin-inline: auto;
}

.faq-header .section-desc {
  color: rgba(255, 255, 255, 0.8);
  margin-inline: auto;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  overflow: hidden;
  transition: background 0.3s ease;
}

.faq-item[open] {
  background: rgba(255, 255, 255, 0.22);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon {
  background: #fff;
}

.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
  background: var(--accent);
}

.faq-item[open] .faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 28px 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* ============================================
   DEMO MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 22, 38, 0.48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal {
  background: #fff;
  border-radius: 24px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px 32px;
  box-shadow: 0 20px 44px rgba(10, 20, 33, 0.22);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: transform, opacity;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.modal-overlay.active .modal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.modal-subtitle {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.form-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}

.input-wrap input,
.input-wrap select {
  width: 100%;
  padding: 14px 14px 14px 42px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: #f9f7f5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  appearance: none;
}

.select-wrap select {
  padding-left: 14px;
  cursor: pointer;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
  margin-top: -3px;
}

.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 103, 103, 0.12);
}

.input-wrap input::placeholder {
  color: #aaa;
}

.form-row {
  display: flex;
  gap: 14px;
}

.modal-submit {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: var(--gradient-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 4px;
}

.modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 109, 61, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 72px 0 32px;
  background:
    radial-gradient(circle at top left, rgba(255, 129, 76, 0.14), transparent 24%),
    #0d1724;
  color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 34px;
}

.footer-brand {
  max-width: 360px;
}

.footer-brand .navbar-logo {
  margin-bottom: 18px;
}

.footer-brand p {
  color: rgba(232, 238, 245, 0.72);
}

.footer-col h4 {
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 213, 194, 0.9);
}

.footer-col a {
  display: block;
  padding: 6px 0;
  color: rgba(232, 238, 245, 0.72);
  transition: color var(--transition), transform var(--transition);
}

.footer-col a:hover {
  color: var(--white);
  transform: translateX(4px);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  color: rgba(232, 238, 245, 0.58);
  font-size: 0.84rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero .container,
  .overview-grid,
  .discover-content {
    gap: 40px;
  }

  .solutions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .empower-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .timeline {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }

  .timeline::before {
    display: none;
  }

  .timeline-step {
    flex: 0 0 calc(50% - 12px);
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-card.featured {
    transform: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 920px) {
  section {
    padding: 92px 0;
  }

  .hero {
    min-height: auto;
    padding: 138px 0 72px;
  }

  .hero .container,
  .overview-grid,
  .discover-content,
  .comparison-cards,
  .security-grid,
  .pricing-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-content,
  .overview-text,
  .component-desc {
    max-width: none;
    text-align: center;
  }

  .section-desc,
  .hero-content p,
  .overview-text p,
  .component-desc p,
  .faq-answer p {
    text-align: justify;
    text-align-last: center;
  }

  .overview-visual {
    min-height: 440px;
  }

  .overview-device {
    width: min(100%, 360px);
    max-width: 360px;
    max-height: 360px;
  }

  .hero-image {
    justify-self: stretch;
    max-width: none;
  }

  .comparison-table {
    grid-template-columns: 1fr;
  }

  .comparison-header:nth-child(2) {
    display: none;
  }

  .comparison-cell {
    min-height: unset;
  }

  .comparison-cell:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line-dark);
  }

  .comparison-cell:last-child {
    border-bottom: none;
  }

  .component-showcase {
    grid-template-columns: 1fr;
  }

  .showcase-image {
    min-height: 280px;
  }

  .component-header {
    align-items: flex-start;
  }

  .overview-visual {
    min-height: 440px;
  }

  .overview-device {
    width: min(100%, 360px);
    max-width: 360px;
    max-height: 360px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .container {
    width: min(100% - 32px, var(--max-width));
  }

  .navbar {
    padding: 14px 0;
  }

  .navbar .container {
    padding: 14px 18px;
    border-radius: 26px;
  }

  .nav-links {
    position: fixed;
    inset: 92px 16px auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(11, 21, 35, 0.92);
    backdrop-filter: blur(22px);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }

  .nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 1rem;
    padding: 12px 14px;
  }

  .nav-utility-group {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding-left: 0;
  }

  .language-picker,
  .language-menu {
    width: 100%;
  }

  .language-menu {
    position: static;
    margin-top: 8px;
    background: rgba(255, 253, 249, 0.98);
    border-color: rgba(18, 34, 56, 0.08);
    box-shadow: 0 18px 48px rgba(11, 21, 35, 0.12);
  }

  .language-trigger,
  .nav-login {
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 12px 14px;
  }

  .language-menu .language-option {
    color: var(--ink) !important;
  }

  .language-menu .language-option:hover {
    background: rgba(18, 34, 56, 0.06);
    color: var(--ink) !important;
  }

  .language-menu .language-option.active {
    background: rgba(255, 103, 103, 0.1);
    color: var(--accent) !important;
  }

  .nav-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-links a:hover,
  .nav-links a.active-link,
  .navbar.scrolled .nav-links a:hover,
  .navbar.scrolled .nav-links a.active-link {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white) !important;
  }

  .menu-toggle {
    display: flex;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .empower-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-content {
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-trust {
    justify-content: center;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
  }

  .hero-image::before {
    inset: 8% 0 -8%;
  }

  .section-title {
    margin-inline: auto;
  }

  .section-desc {
    margin-inline: auto;
  }

  .component-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .component-desc {
    text-align: justify;
    text-align-last: center;
  }

  .timeline-step {
    flex: 0 0 100%;
  }

  .pricing-header {
    margin-bottom: 44px;
  }

  .pricing-card,
  .pricing-card.featured {
    transform: none;
  }

  .pricing-card.featured {
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  section {
    padding: 78px 0;
  }

  .section-title {
    font-size: 2.05rem;
  }

  .hero {
    padding-top: 124px;
  }

  .hero h1 {
    font-size: 2.85rem;
  }

  .comparison-cell,
  .solution-card,
  .function-card,
  .security-col,
  .compare-card,
  .stat-card,
  .step-card,
  .pricing-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .empower-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .solution-card {
    padding: 20px 16px;
  }

  .solution-icon {
    width: 48px;
    height: 48px;
  }

  .empower-item {
    min-height: 170px;
  }

  .deployment-note {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .pricing-contact strong {
    font-size: 2.15rem;
  }
}

/* ============================================
   WHATSAPP CHAT BUBBLE
   ============================================ */
.whatsapp-bubble {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}

.whatsapp-bubble svg {
  width: 32px;
  height: 32px;
}

.whatsapp-bubble:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}

@media (max-width: 560px) {
  .whatsapp-bubble {
    bottom: 18px;
    right: 18px;
    width: 52px;
    height: 52px;
  }

  .whatsapp-bubble svg {
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   NEW SECTIONS — USPS / REPORT HERO / MORE MODULES / ABOUT
   ============================================ */

/* 3 USPs */
.usps {
  padding: 6rem 0;
}
.usps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.usp-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.usp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.usp-number {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.usp-stat {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.usp-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.usp-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .usps-grid { grid-template-columns: 1fr; }
}

/* Report Hero */
.report-hero {
  padding: 6rem 0;
}
.report-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.report-hero-content .section-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: var(--white);
  margin: 1rem 0 1.5rem;
}
.report-hero-content .section-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.report-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}
.report-stat strong {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--color-coral-light);
}
.report-stat span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  display: block;
  margin-top: 0.25rem;
}
.report-hero-image img {
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .report-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .report-hero-stats { grid-template-columns: 1fr; }
}

/* About page */
.about-hero { padding-bottom: 4rem; }
.about-story { padding: 6rem 0; }
.about-story .section-desc { margin-bottom: 1rem; text-align: justify; }
.about-mission { padding: 6rem 0; }
.about-mission .section-label { justify-content: center; }
.about-mission .section-title { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 54px; }
.about-vision { padding: 5rem 0; }
.about-vision .section-title { font-weight: 500; line-height: 1.5; }
.about-why { padding: 6rem 0; }
.about-why-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.about-why-header .section-label { justify-content: center; }
.about-why-header .section-title { margin-left: auto; margin-right: auto; }
.about-why-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.about-team { padding: 5rem 0; }
.about-testimonials { padding: 4rem 0; }
.about-cta { padding: 6rem 0; text-align: center; }

/* Blog post body: justified paragraphs */
.post-body p { text-align: justify; }

@media (max-width: 720px) {
  .about-why-grid { grid-template-columns: 1fr; }
}

/* Component CTA */
.component-cta {
  text-align: center;
  margin-top: 2rem;
}

/* Solutions pages */
.solutions-hero { padding-bottom: 4rem; }
.solutions-grid-section { padding: 5rem 0; }
.solutions-cta { padding: 5rem 0; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .modules-grid { grid-template-columns: 1fr; }
}

/* Simple heroes without a right-side image — collapse the 2-col grid to 1 */
.solutions-hero .container,
.industry-hero .container,
.blog-hero .container,
.post-hero .container,
.contact-hero .container {
  grid-template-columns: 1fr;
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1.75rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(20, 20, 40, 0.1);
  border-color: rgba(255, 103, 103, 0.35);
}

.dark-section .module-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white, #fff);
}

.dark-section .module-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 103, 103, 0.5);
}

.module-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 103, 103, 0.08);
}

.module-card-icon img { width: 34px; height: 34px; object-fit: contain; }

.module-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0;
}

.module-card-badge {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent, #ff6767);
  margin: 0;
}

.module-card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft, #555);
}

.dark-section .module-card-desc { color: rgba(255, 255, 255, 0.7); }

.module-card-cta {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent, #ff6767);
}

/* Module subpage hero */
.module-page-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 18%),
    radial-gradient(circle at 82% 16%, rgba(255, 165, 117, 0.22), transparent 22%),
    linear-gradient(315deg, #112033 0%, #1f3350 38%, #ff9067 88%, #ff6b63 108%);
}

.page-hero.module-page-hero .container {
  display: block;
}

.module-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 44px;
  align-items: center;
}

.module-hero-content .module-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
}

.module-hero-content .section-label {
  margin-bottom: 16px;
}

.module-hero-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.module-hero-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(10, 20, 33, 0.18));
}

.module-hero-content h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
  color: var(--white);
  margin: 0;
}

.module-hero-badge {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--accent-soft);
  margin: 0 0 14px;
}

.module-hero-desc {
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.82;
  color: rgba(241, 245, 249, 0.84);
  margin: 0;
}

.module-feature-pills {
  margin-top: 28px;
  margin-bottom: 28px;
}

.feature-pill-dark {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

.module-hero-image-card {
  padding: 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.module-hero-image-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(10, 20, 33, 0.26);
}

.module-features,
.module-related,
.module-overview-band {
  padding: 5rem 0;
}

.module-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: module-feature;
}

.module-feature-card {
  position: relative;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(12, 22, 38, 0.08);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow-sm);
}

.module-feature-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 103, 103, 0.1);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.module-feature-index::before {
  counter-increment: module-feature;
  content: "0" counter(module-feature);
}

.module-feature-card h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--ink);
}

.module-feature-card p {
  color: var(--ink-soft);
  line-height: 1.68;
}

.module-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 32px;
  align-items: start;
}

.module-overview-copy .section-desc {
  max-width: 620px;
}

.module-overview-points {
  display: grid;
  gap: 18px;
}

.module-overview-point {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  align-items: start;
}

.module-overview-point.has-video {
  grid-template-columns: 16px minmax(0, 1fr) 64px;
  align-items: center;
}

.module-overview-body { min-width: 0; }

.module-overview-play {
  appearance: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--gradient-accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 10px 24px -8px rgba(255, 103, 103, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  justify-self: end;
}
.module-overview-play:hover { transform: scale(1.08); box-shadow: 0 14px 30px -6px rgba(255, 103, 103, 0.7); }
.module-overview-play:active { transform: scale(0.96); }
.module-overview-play svg { width: 22px; height: 22px; margin-left: 2px; }

@media (max-width: 560px) {
  .module-overview-point.has-video {
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas: "bullet body" "play play";
  }
  .module-overview-point.has-video > .module-overview-bullet { grid-area: bullet; }
  .module-overview-point.has-video > .module-overview-body { grid-area: body; }
  .module-overview-point.has-video > .module-overview-play { grid-area: play; justify-self: start; }
}

/* ──── Video lightbox (YouTube Shorts) ──── */
.video-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.video-modal.open { display: flex; }
.video-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 12, 22, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-modal__shell {
  position: relative;
  width: min(95vw, 420px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: video-modal-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes video-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.video-modal__frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(82vh, 900px);
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.video-modal__frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.video-modal__caption {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
  max-width: 32ch;
}
.video-modal__close {
  position: absolute; top: -46px; right: -6px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
  border: 0; cursor: pointer;
}
.video-modal__close:hover { background: rgba(255, 255, 255, 0.22); }
.video-modal__close svg { width: 20px; height: 20px; }
body.video-modal-open { overflow: hidden; }

.module-overview-bullet {
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--gradient-accent);
  box-shadow: 0 0 0 6px rgba(255, 103, 103, 0.08);
}

.module-overview-point h3 {
  color: var(--white);
  font-size: 1.06rem;
  line-height: 1.35;
  margin-bottom: 8px;
}

.module-overview-point p {
  color: rgba(232, 238, 245, 0.76);
  line-height: 1.68;
}

.module-card-rich {
  min-height: 100%;
}

.module-card-head {
  display: flex;
  gap: 14px;
  align-items: center;
}

@media (max-width: 1080px) {
  .module-hero-grid,
  .module-overview-grid,
  .module-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .module-hero-title {
    gap: 12px;
  }

  .module-hero-icon {
    width: 46px;
    height: 46px;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }
}

/* Industries pages */
.industries-hero { padding-bottom: 4rem; }
.industries-grid-section { padding: 5rem 0; }
.industry-hero { padding: 5rem 0 4rem; }
.industry-modules { padding: 5rem 0; }
.industry-related { padding: 5rem 0; }

.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.industry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px rgba(20, 20, 40, 0.04);
  text-decoration: none;
  color: inherit;
  min-height: 140px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.1);
  border-color: rgba(255, 103, 103, 0.35);
}

.dark-section .industry-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white, #fff);
}

.dark-section .industry-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 103, 103, 0.5);
}

.industry-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.industry-card-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent, #ff6767);
}

/* Blog pages */
.blog-hero { padding-bottom: 4rem; }
.blog-list-section { padding: 5rem 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(20, 20, 40, 0.12);
  border-color: rgba(255, 103, 103, 0.35);
}

.dark-section .blog-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white, #fff);
}

.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: #f4f2ef;
  overflow: hidden;
}

.blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1.5rem;
  flex: 1;
}

.blog-card-meta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
}

.blog-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.blog-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft, #555);
}

.dark-section .blog-card-excerpt { color: rgba(255, 255, 255, 0.7); }

.blog-card-cta {
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent, #ff6767);
}

/* Blog post page */
.post-hero { padding: 5rem 0 2.5rem; }

.post-hero-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.post-hero-content .post-back {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1rem;
}

.post-meta {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
  margin-bottom: 1rem;
}

.post-hero-content h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.post-excerpt {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft, #555);
  margin: 0;
}

.post-cover-wrap { padding: 1rem 0 3rem; }

.post-cover {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 10, 30, 0.2);
}

.post-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.post-body-section { padding: 3rem 0 5rem; }

.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* Markdown blocks rendered from CMS body (marked output). */
.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.post-body h2 {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 2.4rem 0 0.9rem;
}
.post-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}
.post-body h4 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 1.6rem 0 0.6rem;
  color: var(--ink-2, var(--ink));
}
.post-body ul,
.post-body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.75;
}
.post-body li { margin-bottom: 0.4rem; }
.post-body li > p { margin: 0; }
.post-body blockquote {
  margin: 1.6rem 0;
  padding: 0.75rem 1.2rem;
  border-left: 3px solid var(--accent, #ff6d3d);
  background: rgba(255, 109, 61, 0.06);
  color: var(--ink);
  font-style: italic;
  border-radius: 0 10px 10px 0;
}
.post-body blockquote p { margin: 0.4rem 0; }
.post-body a {
  color: var(--accent, #ff6d3d);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }
.post-body code {
  background: rgba(15, 28, 46, 0.06);
  padding: 0.12em 0.4em;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92em;
  color: #b94d20;
  border: 1px solid rgba(15, 28, 46, 0.08);
}
.post-body pre {
  background: #0e1c2e;
  color: #f6f4ef;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 1.4rem 0;
  display: block;
}
.post-body hr {
  border: 0;
  border-top: 1px solid rgba(15, 28, 46, 0.12);
  margin: 2rem 0;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}
.post-body th,
.post-body td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(15, 28, 46, 0.1);
}
.post-body th {
  background: rgba(15, 28, 46, 0.04);
  font-weight: 700;
}

.post-related { padding: 5rem 0; }

/* Contact page */
.contact-hero { padding-bottom: 4rem; }
.contact-main { padding: 5rem 0; }
.contact-map { padding: 5rem 0; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: 2.5rem;
  align-items: start;
}

.contact-info {
  padding: 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 32px rgba(20, 20, 40, 0.04);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-info-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-info-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-info-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
}

.contact-info-value {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: normal;
  text-decoration: none;
}

a.contact-info-value:hover { color: var(--accent); }

.contact-form-card {
  padding: 2.25rem;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 32px rgba(20, 20, 40, 0.05);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form .form-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: #f9f7f5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 103, 103, 0.12);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa;
}

.contact-form .btn-primary {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.form-disclaimer {
  font-size: 0.82rem;
  color: var(--ink-soft, #888);
  margin: 0.5rem 0 0;
}

.map-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(10, 10, 30, 0.25);
}

.map-frame iframe {
  display: block;
  width: 100%;
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
  .contact-info,
  .contact-form-card {
    padding: 1.5rem;
  }
}

/* ============================================
   SECONDARY PAGE REDESIGN
   ============================================ */

.page-hero {
  min-height: auto;
  padding: 168px 0 96px;
}

.page-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 56px;
  align-items: center;
}

.about-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 188, 145, 0.32), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.14), transparent 20%),
    linear-gradient(320deg, #14233a 0%, #263b58 28%, #ff9165 78%, #ff6767 100%);
}

.solutions-hero {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.16), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(255, 165, 117, 0.26), transparent 22%),
    linear-gradient(315deg, #151f33 0%, #1f3350 34%, #ff9465 82%, #ff6a63 100%);
}

.industries-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 165, 117, 0.24), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.14), transparent 18%),
    linear-gradient(315deg, #102033 0%, #1c3550 40%, #f1ab4f 88%, #ff7b63 116%);
}

.blog-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255, 165, 117, 0.18), transparent 24%),
    linear-gradient(315deg, #112033 0%, #1d314d 34%, #ff8f67 82%, #ff6a63 100%);
}

.contact-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.14), transparent 18%),
    radial-gradient(circle at 78% 14%, rgba(255, 165, 117, 0.28), transparent 24%),
    linear-gradient(315deg, #0f2135 0%, #1e3551 36%, #ff9366 84%, #ff6b63 100%);
}

.industry-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(255, 165, 117, 0.18), transparent 22%),
    linear-gradient(315deg, #12233a 0%, #203756 38%, #ff9267 86%, #ff6f63 104%);
}

.page-hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.85rem);
  font-weight: 700;
  color: var(--white);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin-bottom: 22px;
}

.page-hero-copy > p {
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.82;
  color: rgba(241, 245, 249, 0.86);
  margin-bottom: 0;
}

.page-hero-visual {
  position: relative;
}

.page-visual-frame,
.contact-summary-card,
.industry-profile-card,
.featured-article-card {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.page-visual-frame {
  padding: 22px;
}

.page-visual-frame--modules,
.page-visual-frame--industries {
  padding: 26px;
}

.industry-portrait-card {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.1);
}

.page-visual-image {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(10, 20, 33, 0.28);
}

.industry-portrait-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 540px;
  object-fit: cover;
  object-position: center top;
  border-radius: 24px;
}

.hero-bullet-list {
  display: grid;
  gap: 14px;
  margin: 32px 0;
}

.hero-bullet-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}

.hero-bullet-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
}

.hero-bullet-icon svg {
  width: 20px;
  height: 20px;
}

.page-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.page-metric-card {
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(12, 22, 38, 0.72);
  color: var(--white);
}

.page-metric-card strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--color-coral-light);
}

.page-metric-card span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(232, 238, 245, 0.8);
}

.page-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 40px;
  align-items: start;
}

.page-section-copy .section-desc + .section-desc {
  margin-top: 14px;
}

.page-side-stack {
  display: grid;
  gap: 18px;
}

.glass-info-card {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.glass-info-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.glass-info-card p {
  color: rgba(232, 238, 245, 0.78);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.section-heading-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading-center .section-title,
.section-heading-center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.page-card-grid {
  display: grid;
  gap: 20px;
}

.page-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-info-card,
.number-card {
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(12, 22, 38, 0.08);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: var(--shadow-sm);
}

.page-info-card-dark,
.dark-section .industry-showcase-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.page-info-card h3,
.number-card h3 {
  font-size: 1.18rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.page-info-card p,
.number-card p {
  color: var(--ink-soft);
}

.page-info-card-dark p {
  color: rgba(232, 238, 245, 0.76);
}

.page-info-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(255, 103, 103, 0.1);
}

.page-info-icon img,
.page-info-icon svg {
  width: 30px;
  height: 30px;
}

.page-info-icon-dark {
  background: rgba(255, 255, 255, 0.12);
}

.number-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 28px;
}

.number-card-index {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  line-height: 1.2;
  padding-top: 4px;
}

.number-card-copy {
  display: grid;
  gap: 10px;
}

.number-card h3 {
  color: var(--ink);
  margin-bottom: 0;
}

.number-card p {
  color: var(--ink-soft);
  margin: 0;
}

.cta-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-panel .section-title,
.cta-panel .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.cta-panel .hero-buttons {
  justify-content: center;
  margin-top: 28px;
}

.btn-outline-dark {
  border-color: rgba(12, 22, 38, 0.14);
  color: var(--ink);
  background: rgba(12, 22, 38, 0.03);
}

.btn-outline-dark:hover {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.mini-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mini-module-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(12, 22, 38, 0.72);
  color: var(--white);
}

.mini-module-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.mini-module-icon img {
  width: 30px;
  height: 30px;
}

.mini-module-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.mini-module-card span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(232, 238, 245, 0.76);
}

.solution-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.solutions-mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 54px;
}

.solutions-mission-copy .section-title {
  max-width: 620px;
}

.solutions-mission-copy .section-desc {
  max-width: 620px;
}

.solutions-mission-visual {
  display: flex;
  justify-content: flex-end;
}

.solutions-mission-image-card {
  width: 100%;
  max-width: 620px;
  padding: 18px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 241, 0.92));
  border: 1px solid rgba(255, 103, 103, 0.12);
  box-shadow: var(--shadow-md);
}

.solutions-mission-image-card img {
  width: 100%;
  border-radius: 22px;
  display: block;
}

.solutions-values-heading {
  margin-top: 10px;
}

.solution-showcase-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.solution-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 165, 117, 0.45);
  box-shadow: 0 24px 56px rgba(8, 16, 28, 0.26);
}

.solution-showcase-media {
  aspect-ratio: 16 / 10;
  background: rgba(12, 22, 38, 0.4);
}

.solution-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-showcase-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex: 1;
}

.solution-showcase-head {
  display: flex;
  gap: 14px;
  align-items: center;
}

.feature-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.workflow-card {
  padding: 26px 22px;
  border-radius: 24px;
  border: 1px solid rgba(12, 22, 38, 0.08);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow-sm);
}

.workflow-step {
  display: inline-flex;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--gradient-accent);
  color: var(--white);
  font-weight: 800;
}

.workflow-card h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
}

.workflow-card p {
  color: var(--ink-soft);
}

.industry-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.industry-chip {
  padding: 16px;
  border-radius: 18px;
  background: rgba(12, 22, 38, 0.72);
  color: var(--white);
}

.industry-chip-mark,
.industry-showcase-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 103, 103, 0.14);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.industry-chip strong {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.35;
}

.industry-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.industry-showcase-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(12, 22, 38, 0.08);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.industry-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 103, 103, 0.35);
  box-shadow: var(--shadow-md);
}

.industry-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.industry-showcase-desc {
  color: var(--ink-soft);
}

.industry-focus-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12, 22, 38, 0.06);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.dark-section .industry-showcase-desc {
  color: rgba(232, 238, 245, 0.76);
}

.dark-section .industry-focus-pill {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.industry-profile-card,
.contact-summary-card {
  padding: 30px;
  color: var(--white);
}

.industry-profile-card h2,
.contact-summary-card h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  margin: 18px 0 12px;
}

.industry-profile-card p {
  color: rgba(232, 238, 245, 0.8);
}

.featured-article-card {
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--white);
}

.featured-article-cover {
  aspect-ratio: 16 / 10;
}

.featured-article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-article-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.featured-article-body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.25;
}

.featured-article-body p {
  color: rgba(232, 238, 245, 0.76);
}

.featured-article-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 103, 103, 0.14);
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-article-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 18%),
    radial-gradient(circle at 82% 16%, rgba(255, 165, 117, 0.2), transparent 24%),
    linear-gradient(315deg, #112033 0%, #1f3350 40%, #ff9167 88%, #ff6c63 108%);
}

.article-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.article-meta-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
}

.article-meta-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
}

.article-meta-card strong {
  display: block;
  color: var(--white);
  line-height: 1.4;
}

.article-hero-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.article-hero-cover {
  aspect-ratio: 16 / 10;
  background: rgba(12, 22, 38, 0.4);
}

.article-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  color: var(--white);
}

.article-hero-body h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.2;
}

.article-hero-body p {
  color: rgba(232, 238, 245, 0.78);
  line-height: 1.75;
}

.article-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
  align-items: start;
}

.article-body-card {
  padding: 34px;
  border-radius: 28px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(12, 22, 38, 0.08);
  box-shadow: var(--shadow-sm);
}

.article-body-card .section-title {
  max-width: 680px;
  margin-bottom: 18px;
}

.article-sidebar {
  display: grid;
  gap: 18px;
}

.article-sidebar-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(12, 22, 38, 0.08);
  box-shadow: var(--shadow-sm);
}

.article-sidebar-card p {
  color: var(--ink-soft);
  line-height: 1.72;
}

.article-sidebar-card .btn-primary {
  width: 100%;
}

.article-sidebar-card-dark {
  top: auto;
  position: relative;
  background: var(--gradient-dark);
  border-color: rgba(255, 255, 255, 0.08);
}

.article-sidebar-card-dark .article-meta-label {
  color: rgba(255, 255, 255, 0.6);
}

.article-sidebar-card-dark p {
  color: rgba(232, 238, 245, 0.78);
}

.contact-summary-list {
  display: grid;
  gap: 18px;
}

.contact-summary-item {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-summary-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-summary-item p,
.contact-summary-item a {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.contact-card-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.map-note-card {
  margin-top: 26px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.map-note-card p {
  margin-top: 10px;
  color: rgba(232, 238, 245, 0.82);
}

@media (max-width: 1080px) {
  .page-hero .container,
  .page-split-layout,
  .page-split-layout--map {
    grid-template-columns: 1fr;
  }

  .solution-showcase-grid,
  .workflow-grid,
  .page-card-grid--3,
  .page-card-grid--2,
  .industry-showcase-grid,
  .solutions-mission-grid,
  .article-body-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solutions-mission-grid,
  .article-body-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 820px) {
  .page-hero {
    padding: 138px 0 82px;
  }

  .page-hero-copy h1 {
    font-size: 2.8rem;
  }

  .page-metric-grid,
  .article-meta-strip,
  .mini-module-grid,
  .solution-showcase-grid,
  .workflow-grid,
  .page-card-grid--3,
  .page-card-grid--2,
  .industry-showcase-grid {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    padding: 30px 22px;
  }
}

@media (max-width: 560px) {
  .page-hero {
    padding-top: 124px;
  }

  .industry-portrait-image {
    min-height: 420px;
  }

  .page-visual-frame,
  .article-hero-body,
  .article-body-card,
  .article-sidebar-card,
  .industry-profile-card,
  .contact-summary-card,
  .featured-article-body,
  .industry-showcase-card,
  .page-info-card,
  .number-card,
  .workflow-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-metric-card,
  .mini-module-card {
    padding: 16px;
  }
}

/* ============================================
   INTRODUCER PROGRAM
   ============================================ */

/* Shared status pill — used across landing mockup, dashboard preview,
   referral form, and the introducer dashboard table. */
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(18, 34, 56, 0.08);
  color: var(--ink);
  text-transform: capitalize;
  white-space: nowrap;
}
.pill-new        { background: #ffe9d8; color: #b54708; }
.pill-contacted  { background: #e0e7ff; color: #1d3b9f; }
.pill-progress   { background: #fff3c4; color: #8a5a00; }
.pill-converted  { background: #d3f6e0; color: #0e6b3b; }
.pill-rejected   { background: #fbe5e5; color: #b42424; }
.pill-pending    { background: #f0eee9; color: #5a5042; }
.pill-approved   { background: #d3f6e0; color: #0e6b3b; }
.pill-paid       { background: #cdebff; color: #134f8b; }

/* --- Hero ------------------------------------------------------------ */
.introducer-hero {
  padding-top: 140px;
  padding-bottom: 80px;
}
.introducer-hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 960px) {
  .introducer-hero .container { grid-template-columns: 1fr; gap: 40px; }
}

.introducer-hero-card {
  background: var(--gradient-dark);
  color: var(--white);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.introducer-hero-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 320px;
  height: 320px;
  background: var(--gradient-accent);
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

.introducer-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  position: relative;
}
.introducer-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}
.introducer-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.introducer-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.introducer-hero-link-mockup {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
}
.introducer-mockup-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.introducer-mockup-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}
.introducer-mockup-link code {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.introducer-mockup-link strong {
  color: var(--color-coral-light);
}
.introducer-mockup-copy {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent);
  color: var(--white);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.introducer-mockup-copy svg { width: 16px; height: 16px; }

.introducer-mockup-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.introducer-mockup-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.86);
}

/* --- What pillars ---------------------------------------------------- */
.introducer-pillar-icon {
  background: var(--gradient-accent);
  color: var(--white);
}

/* --- Who can join ---------------------------------------------------- */
.introducer-who { padding: 90px 0; }
.introducer-who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}
@media (max-width: 960px) { .introducer-who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .introducer-who-grid { grid-template-columns: 1fr; } }

.introducer-who-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.introducer-who-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 103, 103, 0.4);
  box-shadow: var(--shadow-md);
}
.introducer-who-chip:nth-child(odd)  { background: linear-gradient(135deg, #fff, #fff5ec); }
.introducer-who-chip:nth-child(even) { background: linear-gradient(135deg, #fff, #ffe9d8); }

.introducer-who-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--gradient-accent);
  color: var(--white);
}
.introducer-who-icon svg { width: 22px; height: 22px; }
.introducer-who-label {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--ink);
}
.introducer-who-footnote {
  text-align: center;
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* --- How it works steps ---------------------------------------------- */
.introducer-how { padding: 90px 0; }
.introducer-steps {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
}
.introducer-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 103, 103, 0.45) 0 8px, transparent 8px 16px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 960px) {
  .introducer-steps { grid-template-columns: repeat(2, 1fr); }
  .introducer-steps::before { display: none; }
}
@media (max-width: 540px) { .introducer-steps { grid-template-columns: 1fr; } }

.introducer-step {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  color: var(--white);
}
.introducer-step-num {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent);
  color: var(--white);
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(255, 103, 103, 0.35);
}
.introducer-step h3 {
  color: var(--white);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.introducer-step p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.55;
}

/* --- Benefits -------------------------------------------------------- */
.introducer-benefits { padding: 90px 0; }
.introducer-benefits-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .introducer-benefits-grid { grid-template-columns: 1fr; gap: 32px; } }

.introducer-benefits-copy .section-title { margin: 16px 0 14px; }
.introducer-benefits-copy .section-desc { margin-bottom: 22px; }

.introducer-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.introducer-benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), border-color var(--transition);
}
.introducer-benefit:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 103, 103, 0.3);
}
.introducer-benefit-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5ec, #ffd0c0);
  color: var(--color-coral-dark);
}
.introducer-benefit-icon svg { width: 22px; height: 22px; }
.introducer-benefit h4 {
  font-size: 1.02rem;
  margin: 2px 0 4px;
  color: var(--ink);
}
.introducer-benefit p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* --- Suitable industries -------------------------------------------- */
.introducer-industries { padding: 90px 0; }
.introducer-industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 44px;
}
@media (max-width: 1100px) { .introducer-industries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .introducer-industries-grid { grid-template-columns: repeat(2, 1fr); } }

.introducer-industry-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  background: var(--gradient-dark);
  color: var(--white);
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  transition: transform var(--transition);
}
.introducer-industry-tile:hover { transform: translateY(-4px); }
.introducer-industry-tile::after {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 160px;
  height: 160px;
  background: var(--gradient-accent);
  filter: blur(60px);
  opacity: 0.25;
  pointer-events: none;
}
.introducer-industry-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-coral-light);
}
.introducer-industry-icon svg { width: 24px; height: 24px; }
.introducer-industry-code {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-coral-light);
}
.introducer-industry-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
}

/* --- Dashboard preview ---------------------------------------------- */
.introducer-dashboard { padding: 90px 0; }
.introducer-dashboard-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 960px) { .introducer-dashboard-grid { grid-template-columns: 1fr; gap: 32px; } }

.introducer-dashboard-copy .section-title,
.introducer-benefits-copy .section-title { color: var(--white); }
.introducer-dashboard-copy .section-desc,
.introducer-benefits-copy .section-desc { color: rgba(255, 255, 255, 0.78); }
.introducer-benefits .introducer-benefits-copy .section-title,
.introducer-benefits .introducer-benefits-copy .section-desc { color: inherit; }
.introducer-benefits .introducer-benefits-copy .section-desc { color: var(--ink-soft); }

.introducer-dashboard-features {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.introducer-dashboard-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
}
.introducer-dashboard-features svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-coral-light);
}

.introducer-dash-window {
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--ink);
}
.introducer-dash-window-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #f3eee5;
  border-bottom: 1px solid var(--line);
}
.introducer-dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c5bcae;
}
.introducer-dash-dot:nth-child(1) { background: #ff6058; }
.introducer-dash-dot:nth-child(2) { background: #ffbf30; }
.introducer-dash-dot:nth-child(3) { background: #28c941; }
.introducer-dash-title {
  margin-left: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.introducer-dash-body { padding: 22px; }
.introducer-dash-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.introducer-dash-summary > div {
  padding: 14px;
  background: linear-gradient(135deg, #fff5ec, #ffe9d8);
  border-radius: 12px;
}
.introducer-dash-summary-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.introducer-dash-summary-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}
.introducer-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.introducer-dash-table th,
.introducer-dash-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.introducer-dash-table th {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.introducer-dash-table tbody tr:last-child td { border-bottom: 0; }

/* --- Support row (deck page 19) — 5 columns on dark bg, no cards --- */
.introducer-support { padding: 90px 0; }
.introducer-support-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 1100px) { .introducer-support-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .introducer-support-grid { grid-template-columns: repeat(2, 1fr); } }

.introducer-support-card {
  position: relative;
  background: transparent;
  border: 0;
  padding: 28px 12px 0;
  text-align: center;
  color: var(--white);
}
/* Thin colored line at top of each column (deck has alternating coral / orange) */
.introducer-support-bar {
  display: block;
  width: 80px;
  height: 2px;
  margin: 0 auto 28px;
  background: var(--color-coral);
  border-radius: 2px;
}
.introducer-support-card:nth-child(even) .introducer-support-bar {
  background: var(--color-coral-light);
}
.introducer-support-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 0;
  background: transparent;
  color: var(--color-coral-light);
}
.introducer-support-icon svg { width: 44px; height: 44px; }
.introducer-support-card:nth-child(even) .introducer-support-icon {
  color: var(--color-coral);
}
.introducer-support-card h3 {
  font-size: 1rem;
  margin: 0;
  color: var(--white);
  font-weight: 600;
  line-height: 1.35;
}
.introducer-support-tagline {
  text-align: center;
  margin-top: 56px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-coral);
}

/* --- FAQ ------------------------------------------------------------- */
.introducer-faq { padding: 90px 0; }
.introducer-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 36px auto 0;
}
.introducer-faq-item {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 22px;
  transition: border-color var(--transition);
}
.introducer-faq-item[open] { border-color: rgba(255, 103, 103, 0.4); }
.introducer-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.introducer-faq-item summary::-webkit-details-marker { display: none; }
.introducer-faq-chev {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: transform var(--transition);
}
.introducer-faq-chev svg { width: 14px; height: 14px; }
.introducer-faq-item[open] .introducer-faq-chev { transform: rotate(180deg); }
.introducer-faq-item p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Final CTA ------------------------------------------------------- */
.introducer-cta { padding: 90px 0; }
.introducer-cta-card {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.introducer-cta-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 480px;
  height: 480px;
  background: var(--gradient-accent);
  filter: blur(100px);
  opacity: 0.3;
  pointer-events: none;
}
.introducer-cta-card h2 {
  position: relative;
  color: var(--white);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 14px;
}
.introducer-cta-card p {
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 26px;
}
.introducer-cta-buttons {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}
.introducer-cta-terms {
  position: relative;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* --- Referral form --------------------------------------------------- */
.refer-summary-card { background: var(--surface-strong); }
.refer-next-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink-soft);
}
.refer-next-steps li {
  display: flex;
  gap: 12px;
  font-size: 0.94rem;
}
.refer-next-steps strong {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-accent);
  color: var(--white);
  border-radius: 8px;
  font-size: 0.82rem;
}

.refer-introducer-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 103, 103, 0.1);
  color: var(--color-coral-dark);
  font-size: 0.92rem;
}
.refer-introducer-banner svg { width: 18px; height: 18px; }

.refer-form-section { padding: 60px 0 110px; }
.refer-form-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 36px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}
.refer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.refer-form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .refer-form-grid { grid-template-columns: 1fr; } }

.refer-form .field { display: flex; flex-direction: column; gap: 6px; }
.refer-form label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.refer-form input,
.refer-form select,
.refer-form textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.refer-form input:focus,
.refer-form select:focus,
.refer-form textarea:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 4px rgba(255, 103, 103, 0.18);
}
.refer-form textarea { resize: vertical; }

.refer-alert {
  margin-top: 18px;
  padding: 12px 16px;
  background: #fbe5e5;
  color: #b42424;
  border-radius: 12px;
  font-size: 0.92rem;
}

.refer-form-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.refer-form-disclaimer {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.refer-success {
  text-align: center;
  padding: 30px 20px;
}
.refer-success-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  background: var(--gradient-accent);
  color: var(--white);
  border-radius: 50%;
}
.refer-success-icon svg { width: 28px; height: 28px; }
.refer-success h3 { font-size: 1.4rem; margin: 0 0 8px; }
.refer-success p { color: var(--ink-soft); margin: 0 0 22px; }

/* ============================================
   INTRODUCER LANDING — PDF-FAITHFUL SECTIONS
   ============================================ */

/* --- HERO COVER (deck page 1) — full coral gradient bg with overlay logo + composite + title pill --- */
.introducer-cover {
  position: relative;
  min-height: 640px;
  padding: 120px 0 80px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, #ff8d65 0%, #ff6d3d 50%, #e85a2c 100%);
  overflow: hidden;
}
.introducer-cover::before {
  /* faint N watermark on the right */
  content: "";
  position: absolute;
  inset: 0 -10% 0 auto;
  width: 540px;
  background: url('/Logo/NEXUS-box.png') center/contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.introducer-cover-logo {
  position: absolute;
  top: 96px;
  left: 48px;
  height: 32px;
  filter: brightness(0) invert(1);
  z-index: 2;
}
.introducer-cover-badge {
  position: absolute;
  bottom: 28px;
  right: 32px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  z-index: 2;
}
.introducer-cover-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.introducer-cover-composite {
  display: block;
  max-width: 720px;
  width: 100%;
  margin: 0 auto 32px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.25));
}
.introducer-cover-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.introducer-cover-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: 0;
  text-transform: uppercase;
}
.introducer-cover-pill {
  display: inline-block;
  background: rgba(0, 0, 0, 0.18);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.02rem;
  font-weight: 600;
}
.introducer-cover-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.btn-outline-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 640px) {
  .introducer-cover-logo { top: 80px; left: 24px; }
  .introducer-cover { padding-top: 100px; min-height: 560px; }
}

/* --- SPLIT-LAYOUT SECTIONS (deck pages 3, 5, 7, 9) --- */
.introducer-split-section {
  background: var(--dark);
  padding: 60px 0;
}
.introducer-split {
  display: grid;
  grid-template-columns: minmax(220px, 28%) 1fr;
  min-height: 460px;
  align-items: stretch;
  background: transparent;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
@media (max-width: 880px) {
  .introducer-split { grid-template-columns: 1fr; border-radius: 18px; }
}

.introducer-split-visual {
  position: relative;
  background-color: #0c1626;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
/* The illustrative SVG (used for ops / problem / handshake panels) */
.introducer-visual-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
}
/* Coral glow behind the visual to lift it off the dark bg */
.introducer-split-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 103, 103, 0.22), transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* Per-section background colors (subtle differentiation) */
.introducer-visual-ops {
  background: radial-gradient(circle at 30% 30%, #1d2c43, #0c1626 75%);
}
.introducer-visual-problem {
  background: radial-gradient(circle at 50% 50%, #1a2840, #0c1626 75%);
}
.introducer-visual-handshake {
  background: radial-gradient(circle at 50% 50%, #1f2f4a, #0c1626 75%);
}

/* Phone visual — different rules: image, not SVG */
.introducer-visual-phone {
  background: linear-gradient(160deg, #1f2f4a, #0c1626);
  padding: 32px 20px;
}
.introducer-visual-phone::before {
  /* Soft glow behind phone */
  width: 280px;
  height: 280px;
}
.introducer-visual-phone img {
  width: auto;
  max-width: 220px;
  max-height: 440px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.introducer-split-content {
  padding: 64px 56px;
  color: var(--white);
  background: var(--dark);
}
@media (max-width: 880px) {
  .introducer-split-content { padding: 48px 24px; }
}

.introducer-split-title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--color-coral);
  margin: 0 0 12px;
  line-height: 1.15;
}
.introducer-split-subtitle {
  font-size: 1rem;
  color: var(--color-coral-light);
  font-weight: 700;
  margin: 0 0 12px;
}
.introducer-split-lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 18px;
  max-width: 720px;
}
.introducer-split-bullets {
  list-style: disc inside;
  margin: 0 0 22px;
  padding: 0 0 0 12px;
  color: rgba(255, 255, 255, 0.85);
}
.introducer-split-bullets li {
  font-size: 1.02rem;
  padding: 4px 0;
  margin-bottom: 2px;
}
.introducer-split-footer-line {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  margin: 8px 0 0;
}

/* Problem rows (page 5) — outlined coral icons + text */
.introducer-problem-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.introducer-problem-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.introducer-problem-glyph {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid var(--color-coral);
  color: var(--color-coral);
}
.introducer-problem-glyph svg { width: 22px; height: 22px; }
.introducer-problem-text {
  font-size: 1.04rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

/* Helps rows (page 7) — coral filled circle checkmark + title + desc */
.introducer-helps-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.introducer-helps-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.introducer-helps-tick {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--white);
  margin-top: 2px;
}
.introducer-helps-tick svg { width: 16px; height: 16px; }
.introducer-helps-row h3 {
  font-size: 1.05rem;
  margin: 0 0 2px;
  color: var(--color-coral);
  font-weight: 700;
}
.introducer-helps-row p {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.82);
}

/* Program bullets (page 9) — 👉 pointer + text */
.introducer-program-bullets {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.introducer-program-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.04rem;
  color: rgba(255, 255, 255, 0.92);
}
.introducer-program-pointer {
  color: var(--color-coral);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* --- WHO CAN BECOME AN INTRODUCER (deck page 11) — pyramid 3-3-2 with icons above chips --- */
.introducer-who { padding: 100px 0; }
.introducer-who-headline {
  text-align: left;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  font-weight: 800;
  margin: 0 0 56px;
  line-height: 1.1;
}
.introducer-who-headline .who-coral { color: var(--color-coral); }
.introducer-who-headline .who-navy  { color: var(--color-navy); }

.introducer-who-pyramid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 36px;
}
.introducer-who-row {
  display: grid;
  gap: 28px;
  justify-content: center;
}
.introducer-who-row-3 { grid-template-columns: repeat(3, minmax(180px, 280px)); }
.introducer-who-row-2 { grid-template-columns: repeat(2, minmax(180px, 280px)); }

@media (max-width: 760px) {
  .introducer-who-row-3,
  .introducer-who-row-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .introducer-who-row-3,
  .introducer-who-row-2 { grid-template-columns: 1fr; }
}

.introducer-who-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.introducer-who-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  background: transparent;
}
.introducer-who-icon svg { width: 42px; height: 42px; }
.introducer-who-chip {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--color-coral);
  color: var(--color-navy);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
/* Deck pattern: coral / peach / coral, peach / coral / peach, peach / coral */
.introducer-who-row-3:nth-of-type(1) .introducer-who-cell:nth-child(2) .introducer-who-chip,
.introducer-who-row-3:nth-of-type(2) .introducer-who-cell:nth-child(1) .introducer-who-chip,
.introducer-who-row-3:nth-of-type(2) .introducer-who-cell:nth-child(3) .introducer-who-chip,
.introducer-who-row-2 .introducer-who-cell:nth-child(1) .introducer-who-chip {
  background: var(--color-coral-light);
}

.introducer-who-footnote {
  text-align: center;
  margin-top: 36px;
  color: var(--color-navy);
  font-weight: 700;
}

/* --- SUITABLE INDUSTRIES (deck page 15) — 3-4-3 with diamond icons above chips --- */
.introducer-industries { padding: 100px 0; }
.introducer-industries-head {
  text-align: center;
  margin-bottom: 48px;
}
.introducer-industries-logo {
  display: block;
  margin: 0 auto 14px;
  height: 40px;
}
.introducer-industries-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
  margin: 0;
  font-weight: 700;
}

.introducer-industries-rows {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.introducer-industries-row {
  display: grid;
  gap: 24px;
  justify-content: center;
}
.introducer-industries-row-3 { grid-template-columns: repeat(3, minmax(140px, 220px)); }
.introducer-industries-row-4 { grid-template-columns: repeat(4, minmax(140px, 220px)); }

@media (max-width: 900px) {
  .introducer-industries-row-3 { grid-template-columns: repeat(3, 1fr); }
  .introducer-industries-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .introducer-industries-row-3,
  .introducer-industries-row-4 { grid-template-columns: repeat(2, 1fr); }
}

.introducer-industry-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.introducer-industry-diamond {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 103, 103, 0.16);
  border: 1.5px solid var(--color-coral);
  color: var(--color-coral-light);
  transform: rotate(45deg);
  border-radius: 8px;
}
.introducer-industry-diamond svg {
  width: 26px;
  height: 26px;
  transform: rotate(-45deg);
}
.introducer-industry-chip {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 6px;
  background: var(--color-coral);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
/* Alternate coral / peach in deck order */
.introducer-industries-row-3 .introducer-industry-cell:nth-child(1) .introducer-industry-chip,
.introducer-industries-row-3 .introducer-industry-cell:nth-child(3) .introducer-industry-chip,
.introducer-industries-row-4 .introducer-industry-cell:nth-child(2) .introducer-industry-chip,
.introducer-industries-row-4 .introducer-industry-cell:nth-child(3) .introducer-industry-chip {
  background: var(--color-coral-light);
}

/* --- CLOSING (deck page 20) — plain centered text on dark, no buttons in deck --- */
.introducer-closing { padding: 120px 0 140px; }
.introducer-closing-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.introducer-closing-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--color-coral);
  margin: 0 0 22px;
  font-weight: 800;
}
.introducer-closing-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 22px;
  line-height: 1.5;
}
.introducer-closing-tagline {
  font-size: 1.05rem;
  color: var(--color-coral-light);
  font-weight: 700;
  margin: 0 0 36px;
}
.introducer-closing-cta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- What is Nexus? (page 3) --- */
.introducer-what-nexus { padding: 90px 0; }
.introducer-nexus-pillars {
  list-style: none;
  margin: 40px auto 22px;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.introducer-nexus-pillars li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: var(--white);
  font-weight: 600;
}
.introducer-nexus-bullet {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--gradient-accent);
  color: var(--white);
  border-radius: 50%;
  flex-shrink: 0;
}
.introducer-nexus-bullet svg { width: 14px; height: 14px; }
.introducer-nexus-footer {
  text-align: center;
  margin-top: 22px;
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- The Problem in Industry (page 5) --- */
.introducer-problem { padding: 90px 0; }
.introducer-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
@media (max-width: 900px) { .introducer-problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .introducer-problem-grid { grid-template-columns: 1fr; } }

.introducer-problem-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-left: 4px solid var(--color-coral);
  border-radius: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.introducer-problem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.introducer-problem-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 103, 103, 0.12);
  color: var(--color-coral-dark);
}
.introducer-problem-icon svg { width: 18px; height: 18px; }
.introducer-problem-card p {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* --- How Nexus Helps (page 7) --- */
.introducer-helps { padding: 90px 0; }
.introducer-helps-list {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}
@media (max-width: 760px) { .introducer-helps-list { grid-template-columns: 1fr; } }

.introducer-help-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
}
.introducer-help-tick {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--white);
  margin-top: 2px;
}
.introducer-help-tick svg { width: 16px; height: 16px; }
.introducer-help-item h3 {
  font-size: 1rem;
  color: var(--color-coral-light);
  margin: 0 0 4px;
}
.introducer-help-item p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

/* --- What is the Introducer Program? (page 9) --- */
.introducer-what-program {
  padding: 90px 0;
  background:
    linear-gradient(180deg, rgba(18, 31, 47, 0) 0%, rgba(18, 31, 47, 0.04) 100%),
    var(--bg);
}
.introducer-what-program .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .introducer-what-program .container { grid-template-columns: 1fr; gap: 24px; } }

.introducer-program-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.introducer-program-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
}
.introducer-program-pointer {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.introducer-program-footer {
  margin-top: 18px;
  font-weight: 700;
  color: var(--color-coral-dark);
  grid-column: 1 / -1;
  text-align: center;
}

/* --- Who Can Become an Introducer? (page 11) — already in earlier block --- */
/* (existing .introducer-who-grid + .introducer-who-chip styles apply) */

/* --- How It Works — circle-disc steps with dotted timeline -------- */

.introducer-how-title {
  text-align: center;
  margin-bottom: 50px;
}
.introducer-how-title h2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.introducer-how-title .how-line1,
.introducer-how-title .how-line2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.introducer-step-circles {
  list-style: none;
  margin: 0;
  padding: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.introducer-step-circles::before {
  content: "";
  position: absolute;
  top: 78px;
  left: 12.5%;
  right: 12.5%;
  height: 0;
  border-top: 3px dashed rgba(255, 255, 255, 0.35);
  z-index: 0;
}
@media (max-width: 900px) {
  .introducer-step-circles { grid-template-columns: repeat(2, 1fr); padding-top: 40px; }
  .introducer-step-circles::before { display: none; }
}
@media (max-width: 520px) {
  .introducer-step-circles { grid-template-columns: 1fr; }
}

.introducer-step-circle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Diamond step number — coral, sits above each circle, on the dotted line */
.introducer-step-diamond {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--color-coral);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  transform: rotate(45deg);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(255, 103, 103, 0.45);
  margin-bottom: 14px;
  z-index: 2;
}
.introducer-step-diamond::before {
  content: attr(data-fake);
}
.introducer-step-diamond > * { transform: rotate(-45deg); }
/* The text inside is a direct text node; counter-rotate via a span */
.introducer-step-diamond {
  /* simulate text counter-rotation: use a pseudo */
}
.introducer-step-circle .introducer-step-diamond {
  font-size: 0.95rem;
}
/* Trick: rotate diamond, then unrotate the text via an inline child.
   We'll instead use clip-path so the text stays upright. */
.introducer-step-diamond {
  transform: none;
  background: var(--color-coral);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border-radius: 0;
  width: 42px;
  height: 42px;
}

/* The big circular disc — alternating coral / peach */
.introducer-step-disc {
  display: inline-flex;
  width: 140px;
  height: 140px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--white);
  box-shadow:
    0 0 0 6px rgba(0, 0, 0, 0.35),
    0 0 0 8px var(--color-coral),
    0 18px 40px rgba(255, 103, 103, 0.4);
  transition: transform var(--transition);
}
.introducer-step-disc svg { width: 56px; height: 56px; }
.introducer-step-circle:hover .introducer-step-disc { transform: scale(1.05); }

/* Alternate coral / peach. Deck pattern: 1=coral, 2=peach, 3=coral, 4=peach */
.introducer-step-circle:nth-child(even) .introducer-step-disc {
  background: var(--color-coral-light);
  box-shadow:
    0 0 0 6px rgba(0, 0, 0, 0.35),
    0 0 0 8px var(--color-coral-light),
    0 18px 40px rgba(255, 165, 117, 0.4);
}
.introducer-step-circle:nth-child(even) .introducer-step-diamond {
  background: var(--color-coral-light);
  box-shadow: 0 8px 24px rgba(255, 165, 117, 0.45);
}

.introducer-step-label {
  margin: 22px 0 0;
  max-width: 180px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

/* --- Why Join section — two-column with coral row underlines ----- */

.introducer-benefits-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .introducer-benefits-split { grid-template-columns: 1fr; gap: 32px; }
}

.introducer-benefits-headline h2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 12px;
}
.introducer-benefits-headline .benefits-eyebrow {
  color: var(--color-coral);
}
.introducer-benefits-headline .benefits-name {
  color: var(--ink);
}
.introducer-benefits-headline .benefits-sub {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
}

.introducer-benefits-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.introducer-benefits-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 103, 103, 0.4);
}
.introducer-benefits-row:last-child {
  border-bottom: 0;
}
.introducer-benefit-deck-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-navy);
}
.introducer-benefit-deck-icon svg { width: 40px; height: 40px; }
.introducer-benefit-text {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
@media (max-width: 540px) {
  .introducer-benefits-row { gap: 14px; padding: 14px 0; }
  .introducer-benefit-deck-icon { width: 44px; height: 44px; }
  .introducer-benefit-deck-icon svg { width: 30px; height: 30px; }
  .introducer-benefit-text { font-size: 0.96rem; }
}

/* --- Suitable Industries — bigger, code hidden --- */
.introducer-industry-code { display: none; }
.introducer-industries-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .introducer-industries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .introducer-industries-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Why Join as Introducer? (page 17) — simpler row layout --- */
.introducer-benefits-list-v2 {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.introducer-benefit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform var(--transition), border-color var(--transition);
}
.introducer-benefit-row:hover {
  transform: translateX(4px);
  border-color: rgba(255, 103, 103, 0.35);
}
.introducer-benefit-row .introducer-benefit-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5ec, #ffd0c0);
  color: var(--color-coral-dark);
}
.introducer-benefit-row .introducer-benefit-icon svg { width: 22px; height: 22px; }
.introducer-benefit-row h3 {
  font-size: 1.02rem;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

/* --- Closing CTA — light variant matching deck "Let's Grow Together" --- */
.introducer-cta { padding: 90px 0 120px; }
.introducer-cta-card {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px;
  background: var(--dark);
  color: var(--white);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.introducer-cta-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 480px;
  height: 480px;
  background: var(--gradient-accent);
  filter: blur(100px);
  opacity: 0.3;
  pointer-events: none;
}
.introducer-cta-eyebrow {
  position: relative;
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-coral-light);
  margin-bottom: 16px;
  font-weight: 700;
}
.introducer-cta-card h2 {
  position: relative;
  color: var(--white);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  margin: 0 0 14px;
}
.introducer-cta-card p {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 26px;
}
.introducer-cta-buttons {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}


/* ============================================================
   NEXUS 2 — NEW HOME REDESIGN (scoped to .nx2-*)
   Lives alongside legacy styles. Legacy classes untouched.
   ============================================================ */

:root {
  --nx2-deep:        #0E1014;
  --nx2-deep-soft:   #14171F;
  --nx2-card-dark:   #1A1D24;
  --nx2-card-border: rgba(255, 255, 255, 0.06);
  --nx2-line-dark:   rgba(255, 255, 255, 0.08);
  --nx2-text-on-dark: #FFFFFF;
  --nx2-text-on-dark-soft: #B8BCC4;
  --nx2-coral:       #FF6B47;
  --nx2-coral-soft:  #FFA882;
  --nx2-coral-deep:  #E55353;
  --nx2-coral-grad:  linear-gradient(135deg, #FFA882 0%, #FF7A5A 50%, #FF6B47 100%);
  --nx2-danger:      #E55353;
  --nx2-light-bg:    #F7F7F8;
  --nx2-light-bg-2:  #EFEFF1;
  --nx2-ink:         #0E1014;
  --nx2-ink-soft:    #5A5F68;
  --nx2-shadow:      0 24px 60px rgba(14, 16, 20, 0.16);
  --nx2-shadow-card: 0 12px 32px rgba(14, 16, 20, 0.08);
}

/* .nx2-body — the new home uses a per-section bg pattern that fully
   covers the body, so we don't need a special body bg here. Inherits the
   global body styling above. */
.nx2-body {
  color: var(--nx2-ink);
  font-family: var(--font-body);
}

/* ============================================================
   Brand watermark backgrounds — use the supplied N-watermark PNGs
   from /Background/. Each background is a 1920x1080 PNG with the N
   logo subtly placed in the upper-right corner. Repeat vertically
   so tall sections stay covered without stretching.
   ============================================================ */
.nx2-bg-dark {
  background-color: var(--nx2-deep);
  background-image: url('/Background/Dark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.nx2-bg-light {
  background-color: var(--nx2-light-bg);
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-bg-coral {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nx2-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 720px) {
  .nx2-container { padding: 0 20px; }
}

.nx2-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx2-coral);
  margin-bottom: 18px;
}
.nx2-eyebrow-light { color: var(--nx2-coral-soft); }

.nx2-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--nx2-ink);
  margin: 0 0 26px;
}
.nx2-h1-line-1 { display: block; color: var(--nx2-coral); }
.nx2-h1-line-2 { display: block; }

.nx2-h1-sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--nx2-ink-soft);
  max-width: 720px;
  margin: -10px 0 22px;
}

.nx2-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nx2-ink);
  margin: 0 0 18px;
}
.nx2-h2-light { color: var(--nx2-text-on-dark); }
.nx2-h2-on-coral { color: var(--nx2-text-on-dark); }
.nx2-h2-pill {
  display: inline-block;
  padding: 14px 32px;
  background: var(--nx2-light-bg);
  color: var(--nx2-ink);
  border-radius: 999px;
  box-shadow: var(--nx2-shadow-card);
}

.nx2-subhead {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--nx2-ink-soft);
  max-width: 640px;
  margin: 0 0 32px;
}

.nx2-section-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--nx2-ink-soft);
  max-width: 720px;
  margin: 0 0 36px;
}
.nx2-section-sub-light { color: var(--nx2-text-on-dark-soft); }

.nx2-center { text-align: center; }

/* ---- Buttons ------------------------------------------------ */
.nx2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.nx2-btn:hover { transform: translateY(-2px); }

.nx2-btn-primary {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(255, 107, 71, 0.34);
}
.nx2-btn-primary:hover { box-shadow: 0 14px 34px rgba(255, 107, 71, 0.46); }

.nx2-btn-outline {
  background: transparent;
  color: var(--nx2-ink);
  border-color: rgba(14, 16, 20, 0.18);
}
.nx2-btn-outline:hover { border-color: var(--nx2-coral); color: var(--nx2-coral); }

.nx2-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--nx2-text-on-dark);
  border-color: rgba(255, 255, 255, 0.12);
}
.nx2-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); }

.nx2-btn-dark {
  background: #0E1014;
  color: #FFFFFF;
}
.nx2-btn-dark:hover { background: #1A1D24; }

.nx2-btn-outline-dark {
  background: transparent;
  color: var(--nx2-text-on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}
.nx2-btn-outline-dark:hover { border-color: var(--nx2-text-on-dark); }

.nx2-arrow, .nx2-play { display: inline-block; }

.nx2-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(14, 16, 20, 0.06);
  color: var(--nx2-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
}
.nx2-trust-pill-dark {
  background: rgba(255, 255, 255, 0.10);
  color: var(--nx2-text-on-dark);
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.nx2-hero {
  position: relative;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding-bottom: 80px;
}

.nx2-hero-strip {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 533;
  min-height: 320px;
  max-height: 560px;
  overflow: hidden;
  background: var(--nx2-deep);
}
.nx2-hero-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.nx2-hero-strip-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 107, 71, 0.12) 0%, transparent 30%, transparent 70%, rgba(247, 247, 248, 0.85) 100%);
  pointer-events: none;
}

.nx2-hero-content {
  padding-top: 56px;
  text-align: left;
}
@media (min-width: 960px) {
  .nx2-hero-content { padding-top: 72px; }
}

.nx2-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 28px;
}

.nx2-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   SECTION 2 — LOGO TRUST STRIP
   ============================================================ */
.nx2-logos {
  padding: 56px 0;
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.nx2-logos .nx2-logo-carousel::before { background: linear-gradient(90deg, #F87C7A, transparent); }
.nx2-logos .nx2-logo-carousel::after  { background: linear-gradient(-90deg, #F87C7A, transparent); }
.nx2-logos-caption {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 28px;
}
.nx2-logos .nx2-logo-item img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.nx2-logos .nx2-logo-item img:hover {
  filter: brightness(0) invert(1);
  opacity: 1;
}
.nx2-logo-carousel {
  overflow: hidden;
  position: relative;
}
.nx2-logo-carousel::before,
.nx2-logo-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.nx2-logo-carousel::before { left: 0; background: linear-gradient(90deg, var(--nx2-light-bg), transparent); }
.nx2-logo-carousel::after  { right: 0; background: linear-gradient(-90deg, var(--nx2-light-bg), transparent); }

.nx2-logo-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: nx2LogoScroll 38s linear infinite;
  width: max-content;
}
.nx2-logo-item img {
  height: 36px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(0.4);
  transition: opacity var(--transition), filter var(--transition);
}
.nx2-logo-item img:hover { opacity: 1; filter: none; }

@keyframes nx2LogoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   SECTION 3 — PROFIT RECOVERY
   ============================================================ */
.nx2-recovery {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}

.nx2-stat-wrap {
  text-align: center;
  margin: 28px auto 56px;
  max-width: 760px;
}
.nx2-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}
.nx2-stat-label {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.4;
  max-width: 520px;
  margin: 0 auto;
}

.nx2-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 820px) {
  .nx2-compare-grid { grid-template-columns: 1fr; }
}

.nx2-compare-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 22px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.nx2-compare-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.nx2-compare-without::before { background: var(--nx2-danger); }
.nx2-compare-with::before    { background: var(--nx2-coral); }

.nx2-compare-header { margin-bottom: 22px; }
.nx2-compare-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.nx2-tag-without { background: rgba(229, 83, 83, 0.16); color: #FF8E8E; }
.nx2-tag-with    { background: rgba(255, 107, 71, 0.16); color: var(--nx2-coral-soft); }
.nx2-compare-sub {
  color: var(--nx2-text-on-dark-soft);
  font-size: 0.95rem;
}

.nx2-compare-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.nx2-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 1rem;
  color: var(--nx2-text-on-dark);
  border-bottom: 1px solid var(--nx2-line-dark);
}
.nx2-compare-list li:last-child { border-bottom: none; }

.nx2-x, .nx2-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.nx2-x { background: rgba(229, 83, 83, 0.14); color: #FF8E8E; }
.nx2-check { background: rgba(255, 107, 71, 0.18); color: var(--nx2-coral-soft); }

.nx2-compare-outcome {
  padding: 14px 18px;
  background: rgba(229, 83, 83, 0.08);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #FF8E8E;
}
.nx2-compare-outcome-good {
  background: rgba(255, 107, 71, 0.10);
  color: var(--nx2-coral-soft);
}
.nx2-outcome-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nx2-anchor-cta {
  display: inline-block;
  margin: 32px auto 0;
  padding: 12px 22px;
  text-align: center;
  width: 100%;
  color: var(--nx2-coral-soft);
  font-weight: 600;
  text-decoration: none;
}
.nx2-anchor-cta:hover { color: var(--nx2-text-on-dark); }

/* ============================================================
   SECTION 4 — PILLARS (interactive diamond)
   ============================================================ */
.nx2-pillars {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 72px 0;
  text-align: center;
}
.nx2-pillars .nx2-section-sub {
  margin: 0 auto 28px;
  text-align: center;
}

.nx2-pillars-diamond {
  position: relative;
  margin: 28px auto 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ".         digitalize ."
    "automate  center     centralize"
    "monitor   center     comply";
  gap: 14px;
  align-items: center;
  justify-items: center;
}
.nx2-pillar-center {
  grid-area: center;
  align-self: center;
  justify-self: center;
  width: 180px;
  height: 180px;
  background: var(--nx2-coral-grad);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 70px rgba(255, 107, 71, 0.40);
}
.nx2-pillar-center img {
  width: 92px;
  height: 92px;
  filter: brightness(0) invert(1);
}
/* Make sure the central N actually centers within its row-spanned cell —
   it sits between AUTOMATE-row (top) and MONITOR-row (bottom). */
.nx2-pillars-diamond > .nx2-pillar-center {
  align-self: center;
}

.nx2-pillar {
  background: var(--nx2-text-on-dark);
  color: var(--nx2-ink);
  border: 1px solid rgba(14, 16, 20, 0.06);
  padding: 22px 22px;
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--nx2-shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  width: 100%;
  max-width: 260px;
  font-family: var(--font-body);
}
.nx2-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(14, 16, 20, 0.14);
  border-color: var(--nx2-coral);
}
.nx2-pillar[aria-expanded="true"] {
  border-color: var(--nx2-coral);
  box-shadow: 0 18px 40px rgba(255, 107, 71, 0.24);
}
.nx2-pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 107, 71, 0.12);
  border-radius: 12px;
  margin-bottom: 14px;
}
.nx2-pillar-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.nx2-pillar-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--nx2-coral);
  margin-bottom: 8px;
}
.nx2-pillar-short {
  display: block;
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.4;
}

.nx2-pillar[data-pillar="automate"]   { grid-area: automate; }
.nx2-pillar[data-pillar="digitalize"] { grid-area: digitalize; }
.nx2-pillar[data-pillar="centralize"] { grid-area: centralize; }
.nx2-pillar[data-pillar="monitor"]    { grid-area: monitor; }
.nx2-pillar[data-pillar="comply"]     { grid-area: comply; }

.nx2-pillar-detail {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: center;
  background: var(--nx2-text-on-dark);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid var(--nx2-coral);
}
.nx2-pillar-long {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--nx2-ink);
  margin: 0 0 18px;
}
.nx2-pillar-link {
  color: var(--nx2-coral);
  font-weight: 700;
  text-decoration: none;
}
.nx2-pillar-link:hover { color: var(--nx2-coral-deep); }

@media (max-width: 720px) {
  .nx2-pillars-diamond {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "center"
      "automate"
      "digitalize"
      "centralize"
      "monitor"
      "comply";
  }
  .nx2-pillar { max-width: 100%; }
}

/* ============================================================
   SECTION 5 — WORKFLOW (auto-play timeline)
   ============================================================ */
.nx2-workflow {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
  text-align: center;
}
.nx2-workflow .nx2-section-sub { margin: 0 auto 36px; }

.nx2-workflow-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 60px auto 60px;
  max-width: 1240px;
}
.nx2-workflow-line {
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 0;
  border-radius: 2px;
  overflow: hidden;
}
.nx2-workflow-line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--nx2-coral-grad);
  transition: width 0.8s ease;
}

.nx2-workflow-stage {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 4px;
  opacity: 0.45;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nx2-workflow-stage.active {
  opacity: 1;
  transform: translateY(-4px);
}
.nx2-workflow-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nx2-card-dark);
  border: 2px solid rgba(255, 255, 255, 0.14);
  color: var(--nx2-text-on-dark-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 auto 22px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nx2-workflow-stage.active .nx2-workflow-node {
  background: var(--nx2-coral);
  border-color: var(--nx2-coral);
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 107, 71, 0.22);
}
.nx2-workflow-mockup {
  width: 96px;
  height: 130px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--nx2-line-dark);
  position: relative;
}
.nx2-workflow-mockup::before {
  content: '';
  position: absolute;
  inset: 12px;
  background: var(--nx2-card-dark);
  border-radius: 8px;
  background-image:
    linear-gradient(transparent 12%, rgba(255, 255, 255, 0.08) 12%, rgba(255, 255, 255, 0.08) 14%, transparent 14%),
    linear-gradient(transparent 32%, rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.06) 34%, transparent 34%),
    linear-gradient(transparent 52%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.06) 54%, transparent 54%),
    linear-gradient(transparent 72%, rgba(255, 107, 71, 0.34) 72%, rgba(255, 107, 71, 0.34) 78%, transparent 78%);
}
.nx2-workflow-stage.active .nx2-workflow-mockup {
  border-color: var(--nx2-coral);
  background: linear-gradient(160deg, rgba(255, 107, 71, 0.14), rgba(255, 107, 71, 0.04));
}
.nx2-workflow-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--nx2-text-on-dark);
  margin-bottom: 8px;
}
.nx2-workflow-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--nx2-text-on-dark-soft);
  margin: 0;
}

@media (max-width: 820px) {
  .nx2-workflow-timeline { grid-template-columns: 1fr 1fr; }
  .nx2-workflow-line { display: none; }
}

.nx2-workflow-counter {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 22px 36px;
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-line-dark);
  border-radius: 18px;
  margin: 24px auto 36px;
}
.nx2-counter-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nx2-counter-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx2-text-on-dark-soft);
}
.nx2-counter-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}
.nx2-counter-before .nx2-counter-value { color: #FF8E8E; text-decoration: line-through; }
.nx2-counter-after .nx2-counter-value  { color: var(--nx2-coral-soft); }
.nx2-counter-arrow { font-size: 1.4rem; color: var(--nx2-coral); }

.nx2-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ============================================================
   SECTION 6 — DASHBOARD SHOWCASE
   ============================================================ */
.nx2-dashboard {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 100px 0;
  text-align: center;
}
.nx2-dashboard .nx2-section-sub { margin: 0 auto 36px; }

.nx2-dashboard-stage {
  position: relative;
  margin: 56px auto;
  max-width: 1100px;
  min-height: 540px;
}
.nx2-dashboard-laptop {
  position: relative;
  margin: 0 auto;
  width: 78%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  background: #FFFFFF;
}
.nx2-dashboard-laptop img {
  width: 100%;
  display: block;
}
.nx2-dashboard-live-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
  animation: nx2LivePulse 1.6s ease-in-out infinite;
}
@keyframes nx2LivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
  50% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

.nx2-dashboard-phone {
  position: absolute;
  bottom: -20px;
  right: 4%;
  width: 140px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
}
.nx2-dashboard-phone img { width: 100%; display: block; }

.nx2-kpi-card {
  position: absolute;
  background: var(--nx2-text-on-dark);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 200px;
  box-shadow: var(--nx2-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-kpi-card:nth-child(3) { top: 8%;  left: -2%; }
.nx2-kpi-card:nth-child(4) { top: 48%; left: -4%; }
.nx2-kpi-card:nth-child(5) { bottom: 14%; right: -2%; }
.nx2-kpi-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx2-ink-soft);
  font-weight: 600;
}
.nx2-kpi-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--nx2-ink);
}
.nx2-kpi-good   .nx2-kpi-value { color: #16A34A; }
.nx2-kpi-highlight .nx2-kpi-value { color: var(--nx2-coral); }
.nx2-kpi-delta {
  font-size: 0.78rem;
  color: var(--nx2-ink-soft);
}

@media (max-width: 820px) {
  .nx2-dashboard-stage { min-height: 360px; }
  .nx2-dashboard-laptop { width: 100%; }
  .nx2-dashboard-phone { display: none; }
  .nx2-kpi-card { display: none; }
}

/* ============================================================
   SECTION 7 — INDUSTRIES
   ============================================================ */
.nx2-industries {
  position: relative;
  background-color: var(--nx2-deep);
  background-image: url('/Background/Dark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
}
.nx2-industries-map {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%);
  opacity: 0.7;
  pointer-events: none;
}
.nx2-industries-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 52%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.nx2-industry-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.nx2-industry-pill {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 8px 22px rgba(255, 107, 71, 0.30);
}
.nx2-industry-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(255, 107, 71, 0.40);
}

/* ============================================================
   SECTION 8 — MODULES TABS
   ============================================================ */
.nx2-modules {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 100px 0;
  text-align: center;
}
.nx2-module-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 40px;
}
.nx2-module-tab {
  padding: 12px 22px;
  background: var(--nx2-text-on-dark);
  border: 1px solid rgba(14, 16, 20, 0.08);
  border-radius: 999px;
  font-weight: 700;
  color: var(--nx2-ink);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.nx2-module-tab:hover { border-color: var(--nx2-coral); color: var(--nx2-coral); }
.nx2-module-tab[aria-selected="true"] {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255, 107, 71, 0.28);
}

.nx2-module-panel {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--nx2-text-on-dark);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--nx2-shadow-card);
  text-align: left;
}
.nx2-module-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.nx2-module-icon {
  width: 72px;
  height: 72px;
  background: var(--nx2-coral-grad);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx2-module-icon img { width: 44px; height: 44px; filter: brightness(0) invert(1); }
.nx2-module-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--nx2-ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.nx2-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 107, 71, 0.12);
  color: var(--nx2-coral);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
}
.nx2-module-desc {
  font-size: 1.02rem;
  color: var(--nx2-ink-soft);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 720px;
}
.nx2-module-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  margin-bottom: 24px;
}
@media (max-width: 820px) {
  .nx2-module-body { grid-template-columns: 1fr; }
}
.nx2-module-mockup {
  background: var(--nx2-light-bg-2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.nx2-module-mockup img {
  width: 100%;
  display: block;
}
.nx2-module-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx2-module-features li {
  background: var(--nx2-light-bg-2);
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 3px solid var(--nx2-coral);
  display: flex;
  align-items: center;
  gap: 14px;
}
.nx2-module-features-text { flex: 1; min-width: 0; }
.nx2-module-features h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--nx2-ink);
}
.nx2-module-features p {
  font-size: 0.9rem;
  color: var(--nx2-ink-soft);
  margin: 0;
  line-height: 1.45;
}
.nx2-module-features-play {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 107, 71, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nx2-module-features-play:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(255, 107, 71, 0.48);
}
.nx2-module-features-play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}
.nx2-module-link {
  display: inline-block;
  color: var(--nx2-coral);
  font-weight: 700;
  text-decoration: none;
}
.nx2-module-link:hover { color: var(--nx2-coral-deep); }

/* ============================================================
   SECTION 9 — MANUAL TO AUTOMATED
   ============================================================ */
.nx2-manual-auto {
  background: var(--nx2-coral-grad);
  padding: 100px 0;
  text-align: center;
  color: var(--nx2-text-on-dark);
}
.nx2-manual-auto .nx2-section-sub { color: rgba(255, 255, 255, 0.86); margin: 0 auto 36px; }

.nx2-ma-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .nx2-ma-grid { grid-template-columns: 1fr; }
}
.nx2-ma-card {
  background: rgba(14, 16, 20, 0.84);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 32px;
  text-align: left;
  color: var(--nx2-text-on-dark);
}
.nx2-ma-traditional { background: rgba(255, 255, 255, 0.92); color: var(--nx2-ink); }
.nx2-ma-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  background: var(--nx2-deep);
  color: var(--nx2-text-on-dark);
  border-radius: 999px;
  margin-bottom: 18px;
}
.nx2-ma-tag-nexus {
  background: var(--nx2-coral-grad);
}
.nx2-ma-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nx2-ma-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nx2-ma-traditional li {
  border-bottom-color: rgba(14, 16, 20, 0.06);
}
.nx2-ma-card li:last-child { border-bottom: none; }

/* ============================================================
   SECTION 10 — REAL DEPLOYMENTS
   ============================================================ */
.nx2-deployments {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 100px 0;
  text-align: center;
}
.nx2-deployments .nx2-deploy-card {
  box-shadow: none;
  background: var(--nx2-light-bg-2);
  border-color: rgba(14, 16, 20, 0.04);
}
.nx2-deployments .nx2-deploy-card:hover {
  box-shadow: 0 18px 40px rgba(14, 16, 20, 0.10);
}
.nx2-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 920px) { .nx2-deploy-grid { grid-template-columns: 1fr; } }

.nx2-deploy-card {
  background: var(--nx2-text-on-dark);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow-card);
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition);
}
.nx2-deploy-card:hover { transform: translateY(-4px); box-shadow: var(--nx2-shadow); }
.nx2-deploy-image {
  height: 200px;
  background: var(--nx2-light-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nx2-deploy-image img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}
.nx2-deploy-body { padding: 24px; }
.nx2-deploy-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0 0 8px;
  color: var(--nx2-ink);
}
.nx2-deploy-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--nx2-ink-soft);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.nx2-dot { opacity: 0.5; }
.nx2-deploy-outcome {
  font-size: 0.98rem;
  color: var(--nx2-ink);
  line-height: 1.5;
  margin: 0 0 18px;
}
.nx2-deploy-link {
  display: inline-block;
  font-weight: 700;
  color: var(--nx2-coral);
  text-decoration: none;
  background: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}
.nx2-deploy-link:hover { color: var(--nx2-coral-deep); }
.nx2-deploy-link:focus-visible { outline: 2px solid var(--nx2-coral); outline-offset: 2px; border-radius: 2px; }
.nx2-deploy-note {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--nx2-ink-soft);
  font-style: italic;
}

/* ============================================================
   SECTION 11 — DISCOVER (strip + 3 stat cards)
   ============================================================ */
.nx2-discover {
  position: relative;
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 0 0 100px;
}
.nx2-discover-strip {
  width: 100%;
  aspect-ratio: 1400 / 533;
  min-height: 280px;
  max-height: 460px;
  overflow: hidden;
  margin-bottom: 64px;
  position: relative;
}
.nx2-discover-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  background: var(--nx2-deep);
}
.nx2-discover-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--nx2-deep) 100%);
}
.nx2-discover .nx2-container { text-align: center; }
.nx2-discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 820px) { .nx2-discover-grid { grid-template-columns: 1fr; } }

.nx2-discover-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 18px;
  padding: 32px 26px;
  text-align: left;
}
.nx2-discover-value {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.nx2-discover-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 10px;
}
.nx2-discover-desc {
  font-size: 0.95rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   SECTION 12 — DEPLOYMENT STEPS
   ============================================================ */
.nx2-deploy-steps {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 100px 0;
  text-align: center;
}
.nx2-deploy-steps .nx2-section-sub { margin: 0 auto 36px; }
.nx2-deploy-steps .nx2-step-card {
  box-shadow: none;
  background: var(--nx2-light-bg-2);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 40px 0 36px;
}
@media (max-width: 920px) { .nx2-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nx2-steps-grid { grid-template-columns: 1fr; } }

.nx2-step-card {
  background: var(--nx2-text-on-dark);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--nx2-shadow-card);
  position: relative;
}
.nx2-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.1rem;
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(255, 107, 71, 0.30);
}
.nx2-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--nx2-ink);
  margin: 0 0 4px;
}
.nx2-step-subtitle {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx2-coral);
  font-weight: 700;
  margin-bottom: 12px;
}
.nx2-step-desc {
  font-size: 0.92rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
.nx2-steps-footer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--nx2-deep);
  color: var(--nx2-text-on-dark);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.nx2-steps-footer-icon { color: var(--nx2-coral); font-size: 1.1rem; }

/* ============================================================
   SECTION 13 — SECURITY & SCALABILITY
   ============================================================ */
.nx2-security {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
  text-align: center;
}
.nx2-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 40px;
  border-radius: 22px;
  overflow: hidden;
}
@media (max-width: 820px) { .nx2-security-grid { grid-template-columns: 1fr; } }
.nx2-security-col {
  padding: 40px 32px;
  text-align: left;
}
.nx2-security-left {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
}
.nx2-security-right {
  background: var(--nx2-card-dark);
}
.nx2-security-col-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  margin: 0 0 22px;
}
.nx2-security-left .nx2-security-col-title { color: #FFFFFF; }
.nx2-security-right .nx2-security-col-title { color: var(--nx2-coral-soft); }

.nx2-security-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.nx2-security-right .nx2-security-item { border-bottom-color: var(--nx2-line-dark); }
.nx2-security-item:last-child { border-bottom: none; }
.nx2-security-item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.nx2-security-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.nx2-security-left .nx2-security-item p { color: rgba(255, 255, 255, 0.84); }
.nx2-security-right .nx2-security-item p { color: var(--nx2-text-on-dark-soft); }

/* ============================================================
   SECTION 14 — PRICING (restyle)
   ============================================================ */
.nx2-pricing {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: 100px 0;
}
.nx2-pricing .nx2-price-card {
  box-shadow: none;
  background: var(--nx2-light-bg-2);
  border-color: rgba(14, 16, 20, 0.05);
}
.nx2-pricing .nx2-price-featured {
  background: #FFFFFF;
}
.nx2-pricing .nx2-price-card:hover {
  box-shadow: 0 18px 40px rgba(14, 16, 20, 0.10);
}
.nx2-pricing-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.nx2-billing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--nx2-text-on-dark);
  border: 1px solid rgba(14, 16, 20, 0.08);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--nx2-ink);
  margin-top: 18px;
}
.nx2-billing-pill span { color: var(--nx2-coral); }

.nx2-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 920px) { .nx2-pricing-grid { grid-template-columns: 1fr; } }

.nx2-price-card {
  background: var(--nx2-text-on-dark);
  border: 2px solid rgba(14, 16, 20, 0.06);
  border-radius: 22px;
  padding: 36px 28px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.nx2-price-card:hover { transform: translateY(-4px); box-shadow: var(--nx2-shadow-card); }
.nx2-price-featured {
  border-color: var(--nx2-coral);
  box-shadow: 0 24px 60px rgba(255, 107, 71, 0.18);
  transform: translateY(-6px);
}
.nx2-price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.nx2-price-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--nx2-ink);
}
.nx2-price-sub {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  margin: 0 0 24px;
  line-height: 1.5;
}
.nx2-price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 0;
  margin-bottom: 22px;
  border-top: 1px solid rgba(14, 16, 20, 0.08);
  border-bottom: 1px solid rgba(14, 16, 20, 0.08);
}
.nx2-price-amount strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--nx2-ink);
}
.nx2-price-amount span {
  color: var(--nx2-ink-soft);
  font-size: 0.9rem;
}
.nx2-price-contact strong { color: var(--nx2-coral); }
.nx2-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.nx2-price-features li {
  padding: 8px 0 8px 24px;
  font-size: 0.92rem;
  color: var(--nx2-ink);
  position: relative;
  line-height: 1.45;
}
.nx2-price-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--nx2-coral);
  font-weight: 800;
}
.nx2-price-cta { width: 100%; justify-content: center; }

/* ============================================================
   SECTION 15 — FAQ
   ============================================================ */
.nx2-faq {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
}
.nx2-faq .nx2-h2,
.nx2-faq .nx2-section-sub {
  color: #FFFFFF;
}
.nx2-faq .nx2-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.nx2-faq-header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nx2-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx2-faq-item {
  background: var(--nx2-text-on-dark);
  border: 1px solid rgba(14, 16, 20, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.nx2-faq-item[open] { border-color: var(--nx2-coral); }
.nx2-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--nx2-ink);
  list-style: none;
}
.nx2-faq-q::-webkit-details-marker { display: none; }
.nx2-faq-icon {
  width: 22px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}
.nx2-faq-icon::before,
.nx2-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--nx2-coral);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.nx2-faq-icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.nx2-faq-icon::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.nx2-faq-item[open] .nx2-faq-icon::after { transform: translateX(-50%) rotate(90deg); }
.nx2-faq-a {
  padding: 0 24px 22px;
  color: var(--nx2-ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ============================================================
   SECTION 16 — FINAL CTA BAND
   ============================================================ */
.nx2-final-cta {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  padding: 100px 0;
  text-align: center;
}
.nx2-final-cta-inner {
  max-width: 920px;
}
.nx2-final-cta-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 7px 18px;
  background: rgba(255, 107, 71, 0.14);
  color: var(--nx2-coral-soft);
  border: 1px solid rgba(255, 107, 71, 0.30);
  border-radius: 999px;
  margin-bottom: 22px;
}
.nx2-final-cta-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, #FFA882 0%, #FF7A5A 45%, #FF6B47 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 16px;
}
.nx2-final-cta-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nx2-text-on-dark);
  margin: 0 0 36px;
  opacity: 0.92;
}
.nx2-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.nx2-final-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ============================================================
   NEXUS 2 — NAVBAR MEGA-MENU
   Replaces the old crowded inline nav. Three parents with hover/click
   panels: Platform, Industries, Resources. Pricing stays a flat link.
   ============================================================ */

/* Global navbar redesign — applies to every page. The legacy translucent
   coral pill + white-on-dark links is replaced site-wide with a cream pill,
   dark links, and the coral logo always in its natural color. */
.navbar .container {
  background: rgba(255, 253, 249, 0.92);
  border-color: rgba(18, 34, 56, 0.08);
  box-shadow: 0 12px 36px rgba(11, 21, 35, 0.08);
}
.navbar-logo .logo-full,
.navbar.scrolled .logo-full {
  filter: none;
}
/* Hamburger lines stay dark always — cream navbar bg makes the legacy
   white-by-default hamburger invisible. */
.menu-toggle span,
.navbar.scrolled .menu-toggle span {
  background: var(--nx2-ink);
}
/* Mobile drawer: match cream navbar style instead of the legacy dark-blue
   drawer so dark nav text stays readable. */
@media (max-width: 920px) {
  .nav-links {
    background: rgba(255, 253, 249, 0.98) !important;
    border-color: rgba(18, 34, 56, 0.08) !important;
    backdrop-filter: blur(22px);
    box-shadow: 0 18px 48px rgba(11, 21, 35, 0.12);
  }
  .nx2-body .nav-links a,
  .nx2-body .nav-links a.active-link,
  .nx2-body .nav-links .nav-section-link,
  .nx2-body .nav-links .nav-section-link.active-link,
  .nx2-body .nav-mega-trigger,
  .nx2-body .language-trigger,
  .nx2-body .nav-login,
  .nx2-body .navbar.scrolled .nav-links a,
  .nx2-body .navbar.scrolled .nav-links a.active-link {
    color: var(--nx2-ink) !important;
    background: transparent !important;
  }
  .nx2-body .nav-links a:hover,
  .nx2-body .nav-links .nav-section-link:hover,
  .nx2-body .nav-mega-trigger:hover {
    background: rgba(14, 16, 20, 0.06) !important;
    color: var(--nx2-coral) !important;
  }
  .nx2-body .nav-links a.active-link,
  .nx2-body .nav-links .nav-section-link.active-link {
    background: rgba(255, 107, 71, 0.10) !important;
    color: var(--nx2-coral) !important;
  }
  .nx2-body .nav-divider {
    background: rgba(14, 16, 20, 0.08) !important;
  }
}
.nav-links a,
.nav-links .nav-section-link,
.nav-mega-trigger,
.language-trigger,
.nav-login {
  color: var(--nx2-ink);
}
.nav-links a:hover,
.nav-links .nav-section-link:hover,
.nav-links a.active-link {
  background: rgba(14, 16, 20, 0.06);
  color: var(--nx2-coral);
}
.navbar.scrolled .nav-links a,
.navbar.scrolled .nav-mega-trigger,
.navbar.scrolled .language-trigger {
  color: var(--nx2-ink);
}

.nav-mega {
  position: relative;
  display: inline-flex;
}

.nav-mega-trigger {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-mega-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform 0.22s ease;
}
.nav-mega[data-open="true"] .nav-mega-trigger,
.nav-mega-trigger:hover {
  color: var(--nx2-coral);
}
.nav-mega[data-open="true"] .nav-mega-trigger svg {
  transform: rotate(180deg);
}

.nav-mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #FFFFFF;
  border: 1px solid rgba(14, 16, 20, 0.06);
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(14, 16, 20, 0.18);
  padding: 28px;
  min-width: 560px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 999;
}
.nav-mega[data-open="true"] .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
.nav-mega-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-top: 1px solid rgba(14, 16, 20, 0.06);
  border-left: 1px solid rgba(14, 16, 20, 0.06);
}

.nav-mega-grid {
  display: grid;
  gap: 32px;
}
.nav-mega-grid-2 { grid-template-columns: 1fr 1fr; }

.nav-mega-heading {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--nx2-coral);
  margin: 0 0 14px;
}

.nav-mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mega-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.nav-mega-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--nx2-ink);
  font-size: 0.92rem;
  line-height: 1.35;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-mega-item:hover {
  background: var(--nx2-light-bg-2);
  color: var(--nx2-coral);
}
.nav-mega-item-name {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}
.nav-mega-item-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--nx2-ink-soft);
  margin-top: 2px;
}
.nav-mega-list-simple .nav-mega-item {
  font-weight: 600;
}

.nav-mega-blurb {
  font-size: 0.85rem;
  color: var(--nx2-ink-soft);
  line-height: 1.45;
  margin: 0 0 14px;
}

.nav-mega-footer-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nx2-coral);
  text-decoration: none;
}
.nav-mega-footer-link:hover { color: var(--nx2-coral-deep); }

/* Mobile fallback: mega-menu becomes accordion inside hamburger drawer.
   The existing .menu-toggle + .nav-links.active flow already handles slide-in;
   we just need the mega items to stack and the panel to drop in-flow. */
@media (max-width: 920px) {
  .nav-mega { display: block; width: 100%; }
  .nav-mega-trigger { width: 100%; justify-content: space-between; padding: 14px 16px; }
  .nav-mega-panel {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--nx2-coral);
    border-radius: 0;
    padding: 12px 16px 18px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    background: rgba(14, 16, 20, 0.02);
  }
  .nav-mega-panel::before { display: none; }
  .nav-mega[data-open="true"] .nav-mega-panel {
    display: block;
    /* Force-cancel the desktop open-state transform (translateX(-50%))
       that otherwise shifts the panel half-width off-screen on mobile. */
    transform: none !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
  }
  .nav-mega-grid-2 { grid-template-columns: 1fr; gap: 18px; }
  .nav-mega-list-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer — Social row + Google Maps link (global, used on every page)
   ============================================================ */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 0;
}
.footer-social-link:hover {
  color: var(--color-coral, #FF6767);
  transform: translateY(-1px);
}
.footer-social-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-gmb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer-gmb-link:hover { color: var(--color-coral, #FF6767); }
.footer-gmb-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   nx2 — Content-page hero (used on About, Contact, Solutions list,
   Industries list — anywhere we want a page hero without the home
   worker-strip)
   ============================================================ */
.nx2-page-hero {
  padding: 120px 0 80px;
  position: relative;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-page-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 920px) {
  .nx2-page-hero { padding: 96px 0 56px; }
  .nx2-page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.nx2-page-hero-copy .nx2-h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.06;
}
.nx2-page-hero-copy .nx2-h1 .highlight {
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nx2-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx2-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
}

.nx2-page-hero-visual {
  position: relative;
}
.nx2-page-hero-image {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  background: #FFFFFF;
}
.nx2-page-hero-image img {
  width: 100%;
  display: block;
}
.nx2-page-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: -42px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  z-index: 2;
}
@media (max-width: 480px) {
  .nx2-page-stats { grid-template-columns: 1fr; margin: 16px 8px 0; }
}
.nx2-page-stat-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  text-align: left;
}
.nx2-page-stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.nx2-page-stat-card span {
  font-size: 0.78rem;
  color: var(--nx2-ink-soft);
  line-height: 1.35;
  display: block;
}

/* ============================================================
   nx2 — About: STORY section (dark + coral glow, 2 col)
   ============================================================ */
.nx2-about-story {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 920px) {
  .nx2-story-grid { grid-template-columns: 1fr; gap: 40px; }
}
.nx2-story-para {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--nx2-text-on-dark-soft);
  margin: 0 0 18px;
}
.nx2-story-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nx2-glass-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--nx2-card-border);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 22px 24px;
}
.nx2-glass-eyebrow {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--nx2-coral-soft);
  margin-bottom: 8px;
}
.nx2-glass-card p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--nx2-text-on-dark-soft);
  margin: 0;
}

/* ============================================================
   nx2 — Section header (centered) — reusable across pages
   ============================================================ */
.nx2-section-header {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

/* ============================================================
   nx2 — About: 5 PRINCIPLES (light)
   ============================================================ */
.nx2-principles {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-principle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1080px) { .nx2-principle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .nx2-principle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .nx2-principle-grid { grid-template-columns: 1fr; } }

.nx2-principle-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--nx2-shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-principle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(14, 16, 20, 0.12);
}
.nx2-principle-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 107, 71, 0.10);
  border-radius: 16px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx2-principle-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.nx2-principle-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--nx2-ink);
  margin: 0 0 8px;
}
.nx2-principle-desc {
  font-size: 0.88rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   nx2 — About: WHY NEXUS (dark + coral glow, 2x2 numbered cards)
   ============================================================ */
.nx2-why {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 820px) { .nx2-why-grid { grid-template-columns: 1fr; } }
.nx2-why-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 18px;
  padding: 30px 28px;
  position: relative;
}
.nx2-why-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.nx2-why-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 10px;
  line-height: 1.3;
}
.nx2-why-desc {
  font-size: 0.96rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   nx2 — Contact page
   ============================================================ */

/* Contact summary card (hero right side) */
.nx2-contact-summary-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
  position: relative;
  overflow: hidden;
}
.nx2-contact-summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--nx2-coral-grad);
}
.nx2-contact-summary-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--nx2-ink);
  margin: 0 0 22px;
}
.nx2-contact-summary-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(14, 16, 20, 0.06);
}
.nx2-contact-summary-item:last-child { border-bottom: none; }
.nx2-contact-summary-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nx2-coral);
  margin-bottom: 4px;
}
.nx2-contact-summary-item p,
.nx2-contact-summary-item a,
.nx2-contact-summary-item address {
  font-size: 0.95rem;
  color: var(--nx2-ink);
  font-style: normal;
  line-height: 1.45;
  margin: 0;
  text-decoration: none;
}
.nx2-contact-summary-item a:hover { color: var(--nx2-coral); }

/* "What happens next" — dark + coral glow */
.nx2-response {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-response-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 820px) { .nx2-response-grid { grid-template-columns: 1fr; } }
.nx2-response-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 18px;
  padding: 28px 24px;
}
.nx2-response-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 107, 71, 0.14);
  color: var(--nx2-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.nx2-response-icon svg { width: 24px; height: 24px; }
.nx2-response-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 8px;
}
.nx2-response-desc {
  font-size: 0.92rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.55;
  margin: 0;
}

/* Form + info section (light — explicit white so the form card blends) */
.nx2-contact-form-section {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-contact-form-section .nx2-contact-form-card,
.nx2-contact-form-section .nx2-contact-info {
  box-shadow: none;
  border-color: rgba(14, 16, 20, 0.06);
}
.nx2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 920px) { .nx2-contact-grid { grid-template-columns: 1fr; } }

.nx2-contact-info {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  position: sticky;
  top: 100px;
}
@media (max-width: 920px) { .nx2-contact-info { position: static; } }
.nx2-contact-info-title {
  font-size: 1.4rem !important;
  margin-bottom: 18px !important;
}
.nx2-contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nx2-contact-info-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(14, 16, 20, 0.06);
}
.nx2-contact-info-list li:last-child { border-bottom: none; }
.nx2-contact-info-list a,
.nx2-contact-info-list address,
.nx2-contact-info-list span {
  font-size: 0.95rem;
  color: var(--nx2-ink);
  font-style: normal;
  line-height: 1.5;
  text-decoration: none;
  display: block;
}
.nx2-contact-info-list a:hover { color: var(--nx2-coral); }

.nx2-contact-form-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 36px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-contact-form { margin-top: 22px; }
.nx2-contact-form-submit {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx2-contact-form-submit .nx2-btn {
  align-self: flex-start;
}
.nx2-contact-form-disclaimer {
  font-size: 0.8rem;
  color: var(--nx2-ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Map section — coral panel + frame */
.nx2-map-section {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
  color: #FFFFFF;
}
.nx2-map-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 920px) { .nx2-map-grid { grid-template-columns: 1fr; } }
.nx2-map-eyebrow {
  color: rgba(255, 255, 255, 0.85) !important;
}
.nx2-map-title {
  color: #FFFFFF !important;
}
.nx2-map-desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 24px;
}
.nx2-map-note-card {
  background: rgba(14, 16, 20, 0.86);
  border-radius: 16px;
  padding: 22px 24px;
}
.nx2-map-note-card .nx2-contact-summary-label {
  color: var(--nx2-coral-soft);
}
.nx2-map-note-card p {
  font-size: 0.95rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
  line-height: 1.5;
}
.nx2-map-gmb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nx2-coral-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}
.nx2-map-gmb-link:hover { color: #FFFFFF; }
.nx2-map-gmb-link svg { width: 16px; height: 16px; }

.nx2-map-frame {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  background: #FFFFFF;
}
.nx2-map-frame iframe { display: block; }

/* ============================================================
   nx2 — Solutions list page
   ============================================================ */

/* Mini module preview grid (hero right side on /solutions) */
.nx2-mini-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #FFFFFF;
  padding: 18px;
  border-radius: 22px;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-mini-module-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  background: var(--nx2-light-bg);
  border-radius: 12px;
  text-align: left;
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-mini-module-icon {
  width: 36px;
  height: 36px;
  background: var(--nx2-coral-grad);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.nx2-mini-module-icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.nx2-mini-module-card strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--nx2-ink);
}
.nx2-mini-module-card span {
  font-size: 0.74rem;
  color: var(--nx2-ink-soft);
  line-height: 1.35;
}

/* Values grid (dark + coral) */
.nx2-solutions-values {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.nx2-value-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
}
.nx2-value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: rgba(255, 107, 71, 0.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx2-value-icon img { width: 32px; height: 32px; object-fit: contain; }
.nx2-value-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 8px;
}
.nx2-value-card p {
  font-size: 0.88rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}

/* 6 modules showcase (white) */
.nx2-solutions-modules {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-modules-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 820px) { .nx2-modules-showcase { grid-template-columns: 1fr; } }
.nx2-module-showcase-card {
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.nx2-module-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(14, 16, 20, 0.14);
}
.nx2-module-showcase-media {
  background: var(--nx2-light-bg-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.nx2-module-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.nx2-module-showcase-body { padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.nx2-module-showcase-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nx2-module-card-icon {
  width: 48px;
  height: 48px;
  background: var(--nx2-coral-grad);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx2-module-card-icon img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.nx2-module-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--nx2-ink);
  margin: 0 0 2px;
}
.nx2-module-card-badge {
  font-size: 0.78rem;
  color: var(--nx2-coral);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.nx2-module-card-desc {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
.nx2-feature-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nx2-feature-pill {
  font-size: 0.78rem;
  padding: 5px 10px;
  background: rgba(255, 107, 71, 0.10);
  color: var(--nx2-coral);
  border-radius: 999px;
  font-weight: 600;
}
.nx2-module-card-cta {
  font-weight: 700;
  color: var(--nx2-coral);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* Workflow cards (dark + coral) */
.nx2-solutions-workflow {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-workflow-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .nx2-workflow-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nx2-workflow-cards { grid-template-columns: 1fr; } }
.nx2-workflow-card-v2 {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 16px;
  padding: 24px 22px;
}
.nx2-workflow-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--nx2-coral-grad);
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 800;
  margin-bottom: 14px;
}
.nx2-workflow-card-v2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 8px;
}
.nx2-workflow-card-v2 p {
  font-size: 0.9rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   nx2 — Industries list page
   ============================================================ */
.nx2-industries-fit {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-industries-list {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-industries-list .nx2-industry-list-card {
  box-shadow: none;
  background: var(--nx2-light-bg-2);
  border-color: rgba(14, 16, 20, 0.04);
}
.nx2-industries-list .nx2-industry-list-card:hover {
  box-shadow: 0 18px 40px rgba(14, 16, 20, 0.10);
}
.nx2-industry-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 920px) { .nx2-industry-list-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nx2-industry-list-grid { grid-template-columns: 1fr; } }

.nx2-industry-list-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx2-industry-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(14, 16, 20, 0.14);
}
.nx2-industry-list-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nx2-industry-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 12px;
  letter-spacing: 0.04em;
}
.nx2-industry-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nx2-coral);
}
.nx2-industry-list-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--nx2-ink);
  margin: 0;
}
.nx2-industry-list-desc {
  font-size: 0.9rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
.nx2-industry-focus-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  background: rgba(255, 107, 71, 0.10);
  color: var(--nx2-coral);
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* ============================================================
   nx2 — Module detail page
   ============================================================ */
.nx2-module-back {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx2-ink-soft);
  text-decoration: none;
  margin-bottom: 18px;
}
.nx2-module-back:hover { color: var(--nx2-coral); }

.nx2-module-hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.nx2-module-hero-icon {
  width: 64px;
  height: 64px;
  background: var(--nx2-coral-grad);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx2-module-hero-icon img { width: 38px; height: 38px; filter: brightness(0) invert(1); }
.nx2-module-hero-title .nx2-h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}
.nx2-module-hero-badge {
  font-size: 0.95rem;
  color: var(--nx2-coral);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.nx2-module-features-band {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-module-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.nx2-module-feature-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.nx2-module-feature-index { display: none; }
.nx2-module-feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 10px;
}
.nx2-module-feature-desc {
  font-size: 0.92rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.55;
  margin: 0;
}
/* Icon-only circular play button — always sits at the bottom of each card
   so the row of buttons aligns across features regardless of text height. */
.nx2-module-feature-play {
  margin-top: auto;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 107, 71, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nx2-module-feature-play:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(255, 107, 71, 0.48);
}
.nx2-module-feature-play svg {
  width: 16px;
  height: 16px;
  margin-left: 2px; /* nudge triangle to optical centre */
}
/* Add breathing room above the button when there is text directly above it. */
.nx2-module-feature-desc + .nx2-module-feature-play { margin-top: 22px; }

.nx2-module-summary {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-module-summary .nx2-module-summary-point {
  box-shadow: none;
  background: var(--nx2-light-bg-2);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-module-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 920px) { .nx2-module-summary-grid { grid-template-columns: 1fr; } }
.nx2-module-summary-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nx2-module-summary-point {
  display: flex;
  gap: 16px;
  background: #FFFFFF;
  padding: 20px 22px;
  border-radius: 14px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-module-summary-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx2-module-summary-icon svg { width: 18px; height: 18px; }
.nx2-module-summary-point h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--nx2-ink);
  margin: 0 0 4px;
}
.nx2-module-summary-point p {
  font-size: 0.9rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}

.nx2-module-related {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.nx2-related-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 16px;
  padding: 24px 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition), border-color var(--transition);
}
.nx2-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--nx2-coral);
}
.nx2-related-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nx2-related-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--nx2-text-on-dark);
  margin: 0 0 2px;
}
.nx2-related-badge {
  font-size: 0.78rem;
  color: var(--nx2-coral-soft);
  font-weight: 600;
  margin: 0;
}
.nx2-related-desc {
  font-size: 0.9rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}
.nx2-related-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nx2-coral-soft);
  margin-top: auto;
}

/* ============================================================
   nx2 — Industry detail page
   ============================================================ */
.nx2-industry-profile-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
  position: relative;
  overflow: hidden;
}
.nx2-industry-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--nx2-coral-grad);
}
.nx2-industry-profile-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.nx2-industry-profile-focus {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--nx2-ink);
  margin: 0 0 14px;
  line-height: 1.2;
}
.nx2-industry-profile-body {
  font-size: 0.98rem;
  color: var(--nx2-ink-soft);
  line-height: 1.6;
  margin: 0;
}

.nx2-industry-modules {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}

/* ============================================================
   nx2 — Blog list + post detail
   ============================================================ */

/* Shared blog card chrome */
.nx2-blog-meta {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nx2-coral);
  margin-bottom: 8px;
}
.nx2-featured-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 4px 10px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Featured post card (blog hero right side) */
.nx2-featured-post {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.nx2-featured-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(14, 16, 20, 0.20);
}
.nx2-featured-post-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nx2-light-bg-2);
}
.nx2-featured-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nx2-featured-post-body { padding: 22px 24px; }
.nx2-featured-post-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--nx2-ink);
  margin: 8px 0 10px;
  line-height: 1.25;
}
.nx2-featured-post-excerpt {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}

/* Blog list — dark + coral */
.nx2-blog-list {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.nx2-blog-card {
  background: var(--nx2-card-dark);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--nx2-card-border);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), border-color var(--transition);
}
.nx2-blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--nx2-coral);
}
.nx2-blog-card-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.nx2-blog-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nx2-blog-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nx2-blog-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
}
.nx2-blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--nx2-text-on-dark-soft);
  line-height: 1.5;
  margin: 0;
}

/* Post detail */
.nx2-post-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.nx2-post-meta-card {
  background: #FFFFFF;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-post-meta-card span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx2-coral);
  font-weight: 700;
  margin-bottom: 4px;
}
.nx2-post-meta-card strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--nx2-ink);
}

.nx2-post-hero-card {
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-post-hero-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nx2-light-bg-2);
}
.nx2-post-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.nx2-post-hero-body { padding: 22px 24px; }
.nx2-post-hero-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--nx2-ink);
  margin: 10px 0 8px;
}
.nx2-post-hero-body p {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.55;
  margin: 0;
}

.nx2-post-body-section {
  padding: 80px 0;
  background-color: #FFFFFF;
}
/* When the white-card sits inside a white-bg section, drop the heavy shadow
   so the card melts into the section instead of looking pasted on top. */
.nx2-post-body-section .nx2-post-body-card {
  box-shadow: none;
  border-color: rgba(14, 16, 20, 0.06);
}
.nx2-post-body-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 920px) { .nx2-post-body-layout { grid-template-columns: 1fr; } }
.nx2-post-body-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 36px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-post-body { margin-top: 18px; color: var(--nx2-ink); }
.nx2-post-body p { font-size: 1.02rem; line-height: 1.7; color: var(--nx2-ink); margin: 0 0 18px; }
.nx2-post-body h2,
.nx2-post-body h3 { font-family: var(--font-display); color: var(--nx2-ink); margin: 28px 0 12px; }
.nx2-post-body a {
  color: var(--nx2-coral);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 107, 71, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.nx2-post-body a:hover,
.nx2-post-body a:focus { color: var(--nx2-coral-deep); text-decoration-color: var(--nx2-coral-deep); }
.nx2-post-body ul,
.nx2-post-body ol { margin: 0 0 18px; padding-left: 24px; font-size: 1.02rem; line-height: 1.7; color: var(--nx2-ink); }
.nx2-post-body ul { list-style: disc outside; }
.nx2-post-body ol { list-style: decimal outside; }
.nx2-post-body li { margin-bottom: 6px; }
.nx2-post-body li > ul,
.nx2-post-body li > ol { margin: 6px 0 0; }
.nx2-post-body blockquote {
  border-left: 4px solid var(--nx2-coral);
  margin: 20px 0;
  padding: 6px 0 6px 18px;
  color: var(--nx2-ink-soft, #4a5b73);
  font-style: italic;
}
.nx2-post-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
  font-size: 0.98rem;
}
.nx2-post-body th,
.nx2-post-body td {
  border: 1px solid rgba(14, 16, 20, 0.1);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.nx2-post-body th { background: #faf8f4; font-weight: 700; color: var(--nx2-ink); }
.nx2-post-body code {
  background: #f0ece4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.nx2-post-body pre {
  background: #0e1c2e;
  color: #f6f4ef;
  padding: 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 20px 0;
}
.nx2-post-body pre code { background: none; padding: 0; color: inherit; }
.nx2-post-body hr { border: none; border-top: 1px solid rgba(14, 16, 20, 0.1); margin: 28px 0; }
.nx2-post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 20px 0; }
@media (max-width: 640px) {
  .nx2-post-body table { display: block; overflow-x: auto; }
}

.nx2-post-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; }
@media (max-width: 920px) { .nx2-post-sidebar { position: static; } }
.nx2-post-sidebar-card {
  background: #FFFFFF;
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-post-sidebar-card p {
  font-size: 0.94rem;
  color: var(--nx2-ink-soft);
  line-height: 1.55;
  margin: 10px 0;
}
.nx2-post-sidebar-card-dark {
  background: var(--nx2-deep);
  border-color: var(--nx2-card-border);
}
.nx2-post-sidebar-card-dark p {
  color: var(--nx2-text-on-dark-soft);
}

.nx2-post-related {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}

/* ============================================================
   nx2 — Introducer landing
   ============================================================ */
/* Legacy coral hero — kept in case any other route still references it */
.nx2-introducer-hero {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 120px 0 80px;
  color: #FFFFFF;
}

/* New white hero with a floating commission stat card on the visual side */
.nx2-introducer-hero-v2 {
  padding: 110px 0 70px;
  position: relative;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-introducer-hero-v2 .nx2-page-hero-visual {
  position: relative;
}
.nx2-intro-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(255, 107, 71, 0.12);
  color: var(--nx2-coral);
  border: 1px solid rgba(255, 107, 71, 0.30);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.nx2-intro-spark { font-size: 0.95rem; }
.nx2-intro-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* Floating "10% commission" stat card overlaying the hero image */
.nx2-intro-stat-card {
  position: absolute;
  bottom: -28px;
  left: -28px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 18px 22px;
  min-width: 200px;
  box-shadow: 0 24px 50px rgba(14, 16, 20, 0.22);
  border: 1px solid rgba(14, 16, 20, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}
.nx2-intro-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--nx2-coral-grad);
  border-radius: 18px 0 0 18px;
}
.nx2-intro-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nx2-ink-soft);
  margin-bottom: 2px;
}
.nx2-intro-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nx2-intro-stat-meta {
  font-size: 0.82rem;
  color: var(--nx2-ink-soft);
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 920px) {
  .nx2-intro-stat-card { position: static; margin: 18px auto 0; }
}

/* Pulsing CTA button — for hero + closing primary buttons */
.nx2-btn-pulse {
  position: relative;
  animation: nx2BtnPulse 2.4s ease-in-out infinite;
}
@keyframes nx2BtnPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(255, 107, 71, 0.34); transform: translateY(0); }
  50%      { box-shadow: 0 14px 38px rgba(255, 107, 71, 0.50); transform: translateY(-2px); }
}

/* Floating live badge on hero image */
.nx2-intro-floating-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(14, 16, 20, 0.92);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px rgba(14, 16, 20, 0.24);
  z-index: 2;
}
.nx2-intro-floating-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.20);
  animation: nx2LiveDot 1.6s ease-in-out infinite;
}
@keyframes nx2LiveDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.20); }
  50%      { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

/* Coral gradient text span used inside the intro hero H1 */
.nx2-intro-h1-coral {
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero eyebrow now allows a bolder embedded RM number */
.nx2-intro-eyebrow-pill strong {
  font-weight: 800;
  color: var(--nx2-coral-deep);
}

/* Earning potential stats band (3 tiles) — tier earnings */
.nx2-intro-stats-band {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-intro-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 820px) { .nx2-intro-stats-grid { grid-template-columns: 1fr; } }

/* Tier earning tiles (Standard / Pro / Enterprise) */
.nx2-intro-earnings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 820px) { .nx2-intro-earnings-grid { grid-template-columns: 1fr; } }
.nx2-intro-earn-tile {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 32px 26px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.05);
  text-align: center;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.nx2-intro-earn-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(14, 16, 20, 0.12);
}
.nx2-intro-earn-featured {
  background: var(--nx2-deep);
  color: #FFFFFF;
  border-color: var(--nx2-coral);
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(14, 16, 20, 0.24);
}
.nx2-intro-earn-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(255, 107, 71, 0.30);
}
.nx2-intro-earn-plan {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--nx2-ink);
  margin-bottom: 8px;
}
.nx2-intro-earn-featured .nx2-intro-earn-plan { color: #FFFFFF; }
.nx2-intro-earn-deal {
  display: block;
  font-size: 0.92rem;
  color: var(--nx2-ink-soft);
  margin-bottom: 14px;
}
.nx2-intro-earn-featured .nx2-intro-earn-deal { color: rgba(255, 255, 255, 0.78); }
.nx2-intro-earn-divider {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nx2-coral);
  margin: 0 0 8px;
}
.nx2-intro-earn-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.nx2-intro-earn-suffix {
  display: block;
  font-size: 0.86rem;
  color: var(--nx2-ink-soft);
  font-weight: 600;
}
.nx2-intro-earn-featured .nx2-intro-earn-suffix { color: rgba(255, 255, 255, 0.78); }

.nx2-intro-earnings-footer {
  text-align: center;
  font-size: 1.05rem;
  color: var(--nx2-ink);
  font-weight: 600;
  margin: 36px auto 0;
  max-width: 720px;
  line-height: 1.5;
}

/* Closing CTA enhancements */
.nx2-intro-closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(14, 16, 20, 0.24);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.nx2-intro-closing-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* ============================================================
   nx2 — Introducer page section punch-ups (below hero)
   ============================================================ */

/* THE PROBLEM — pain grid with bold cards */
.nx2-intro-pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.nx2-intro-pain-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), transform var(--transition);
}
.nx2-intro-pain-card:hover {
  border-color: var(--nx2-coral);
  transform: translateY(-3px);
}
.nx2-intro-pain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(229, 83, 83, 0.16);
  color: #FF8E8E;
  border-radius: 12px;
}
.nx2-intro-pain-icon svg { width: 22px; height: 22px; }
.nx2-intro-pain-card p {
  font-size: 0.94rem;
  color: var(--nx2-text-on-dark);
  line-height: 1.5;
  margin: 0;
  font-weight: 600;
}
.nx2-intro-pain-footer {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nx2-coral-soft);
  margin: 0;
  font-style: italic;
}

/* HOW IT WORKS — big timeline with connecting line */
.nx2-intro-steps-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 920px) {
  .nx2-intro-steps-timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .nx2-intro-steps-timeline { grid-template-columns: 1fr; }
}
.nx2-intro-steps-line {
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--nx2-coral) 20%, var(--nx2-coral) 80%, transparent 100%);
  opacity: 0.35;
  z-index: 0;
}
@media (max-width: 920px) { .nx2-intro-steps-line { display: none; } }

.nx2-intro-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nx2-intro-step-circle {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(255, 107, 71, 0.34);
  border: 4px solid var(--nx2-deep);
  transition: transform var(--transition);
}
.nx2-intro-step:hover .nx2-intro-step-circle {
  transform: scale(1.06);
}
.nx2-intro-step-icon {
  width: 30px;
  height: 30px;
  color: #FFFFFF;
}
/* Step number rendered as a small dark badge on the upper-right corner of the
   circle, so users still see the sequence at a glance. */
.nx2-intro-step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--nx2-deep);
  color: #FFFFFF;
  border: 2px solid var(--nx2-coral);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
}
.nx2-intro-step-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
  line-height: 1.35;
  max-width: 220px;
}

.nx2-intro-how-footer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nx2-card-border);
  border-radius: 999px;
  color: var(--nx2-text-on-dark-soft);
  font-size: 0.92rem;
}
.nx2-intro-how-footer strong { color: var(--nx2-coral-soft); }
.nx2-intro-dark-block .nx2-intro-how-footer { margin: 0 auto; display: inline-flex; }
.nx2-intro-dark-block .nx2-section-header + .nx2-intro-steps-timeline + .nx2-intro-how-footer {
  display: flex;
  justify-content: center;
}

/* Center the how-footer */
.nx2-intro-how-footer {
  margin-left: auto;
  margin-right: auto;
}
.nx2-intro-dark-block > .nx2-container { text-align: center; }
.nx2-intro-dark-block .nx2-section-header { text-align: center; }

/* WHY JOIN — punchy benefit cards */
.nx2-intro-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 920px) { .nx2-intro-benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nx2-intro-benefits-grid { grid-template-columns: 1fr; } }
.nx2-intro-benefit-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.nx2-intro-benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--nx2-coral-grad);
  opacity: 0;
  transition: opacity var(--transition);
}
.nx2-intro-benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--nx2-coral);
}
.nx2-intro-benefit-card:hover::before {
  opacity: 1;
}
.nx2-intro-benefit-icon {
  width: 52px;
  height: 52px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(255, 107, 71, 0.28);
}
.nx2-intro-benefit-icon svg { width: 26px; height: 26px; }
.nx2-intro-benefit-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
  line-height: 1.35;
}
.nx2-intro-stat-tile {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  position: relative;
  overflow: hidden;
}
.nx2-intro-stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nx2-coral-grad);
}
.nx2-intro-stat-tile-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--nx2-coral-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.nx2-intro-stat-tile-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-ink);
  margin-bottom: 8px;
}
.nx2-intro-stat-tile-desc {
  display: block;
  font-size: 0.92rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
}

/* Coral block (was light block before) */
.nx2-intro-coral-block {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
  color: #FFFFFF;
}
.nx2-bullet-list-light li { color: rgba(255, 255, 255, 0.95); }
.nx2-check-light {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.nx2-intro-light-block {
  padding: 100px 0;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-intro-dark-block {
  background-color: var(--nx2-deep);
  background-image:
    radial-gradient(circle at 78% 50%, rgba(255, 107, 71, 0.12), transparent 90%),
    url('/Background/Dark.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  color: var(--nx2-text-on-dark);
  padding: 100px 0;
}
.nx2-intro-visual-card {
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--nx2-shadow);
  border: 1px solid rgba(14, 16, 20, 0.04);
}
.nx2-intro-visual-card img { width: 100%; display: block; }

/* Help cards (used on multiple intro sections) */
.nx2-help-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  text-align: left;
}
.nx2-intro-dark-block .nx2-help-card {
  background: var(--nx2-card-dark);
  border-color: var(--nx2-card-border);
  color: var(--nx2-text-on-dark);
}
.nx2-help-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nx2-ink);
  margin: 12px 0 6px;
}
.nx2-intro-dark-block .nx2-help-card h3 { color: var(--nx2-text-on-dark); }
.nx2-help-card p {
  font-size: 0.92rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
.nx2-intro-dark-block .nx2-help-card p { color: var(--nx2-text-on-dark-soft); }
.nx2-help-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  border-radius: 12px;
}
.nx2-help-tick svg { width: 22px; height: 22px; }

/* Program bullets */
.nx2-intro-program-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 720px) { .nx2-intro-program-bullets { grid-template-columns: 1fr; } }
.nx2-intro-program-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.nx2-intro-program-item p {
  font-size: 0.95rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
  line-height: 1.45;
}
.nx2-intro-program-pointer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--nx2-coral);
  color: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 2px;
}
.nx2-intro-program-footer {
  text-align: center;
  font-size: 1.02rem;
  color: var(--nx2-coral-soft);
  margin-top: 28px;
  font-style: italic;
}

/* Who-can-join grid (4-col cards) */
.nx2-who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 920px) { .nx2-who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .nx2-who-grid { grid-template-columns: 1fr 1fr; } }
.nx2-who-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--nx2-shadow-card);
  border: 1px solid rgba(14, 16, 20, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform var(--transition);
}
.nx2-who-card:hover { transform: translateY(-3px); }
.nx2-who-icon {
  width: 42px;
  height: 42px;
  background: rgba(255, 107, 71, 0.12);
  color: var(--nx2-coral);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx2-who-icon svg { width: 22px; height: 22px; }
.nx2-who-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--nx2-ink);
  line-height: 1.35;
}

/* Industry pills grid (chip-only) */
.nx2-industry-pills-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.nx2-industry-chip {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 107, 71, 0.20);
}

/* Benefits */
.nx2-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) { .nx2-benefits-grid { grid-template-columns: 1fr; } }
.nx2-benefit-card {
  background: var(--nx2-card-dark);
  border: 1px solid var(--nx2-card-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.nx2-benefit-card p {
  font-size: 0.96rem;
  color: var(--nx2-text-on-dark);
  margin: 0;
  line-height: 1.45;
}
.nx2-benefit-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 107, 71, 0.18);
  color: var(--nx2-coral-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nx2-benefit-icon svg { width: 20px; height: 20px; }

/* ============================================================
   nx2 — Case Study request modal
   ============================================================ */
.nx2-case-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.nx2-case-overlay[hidden] { display: none !important; }
.nx2-case-overlay.open { opacity: 1; }
.nx2-case-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 20, 0.72);
  backdrop-filter: blur(6px);
}
.nx2-case-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 38px 38px 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 40px 80px rgba(14, 16, 20, 0.40);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}
.nx2-case-overlay.open .nx2-case-card { transform: translateY(0) scale(1); }
.nx2-case-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(14, 16, 20, 0.06);
  border: none;
  color: var(--nx2-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nx2-case-close:hover { background: rgba(14, 16, 20, 0.12); }
.nx2-case-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nx2-coral);
  margin-bottom: 12px;
}
.nx2-case-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--nx2-ink);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.nx2-case-intro {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--nx2-ink-soft);
  margin: 0 0 22px;
}
.nx2-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.nx2-case-cta { text-decoration: none; }
@media (max-width: 520px) {
  .nx2-case-card { padding: 30px 22px 24px; }
  .nx2-case-title { font-size: 1.3rem; }
  .nx2-case-actions .nx2-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ============================================================
   nx2 — Book Demo modal (2-step form)
   ============================================================ */
.nx2-book-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.nx2-book-overlay[hidden] {
  display: none !important;
}
.nx2-book-overlay.open { opacity: 1; }
.nx2-book-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 20, 0.72);
  backdrop-filter: blur(6px);
}
.nx2-book-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 36px 38px 28px;
  max-width: 640px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 40px 80px rgba(14, 16, 20, 0.40);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}
.nx2-book-overlay.open .nx2-book-card { transform: translateY(0) scale(1); }

.nx2-book-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(14, 16, 20, 0.06);
  border: none;
  color: var(--nx2-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}
.nx2-book-close:hover { background: rgba(14, 16, 20, 0.12); }

.nx2-book-header { text-align: center; margin-bottom: 24px; }
.nx2-book-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--nx2-ink);
  margin: 0 0 8px;
}
.nx2-book-subtitle {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0 0 22px;
}

/* Stepper */
.nx2-book-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.nx2-book-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--nx2-light-bg-2);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nx2-ink-soft);
  transition: background 0.22s ease, color 0.22s ease;
}
.nx2-book-step-pill[data-active="true"] {
  background: var(--nx2-coral-grad);
  color: #FFFFFF;
}
.nx2-book-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(14, 16, 20, 0.10);
  color: var(--nx2-ink);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
.nx2-book-step-pill[data-active="true"] .nx2-book-step-num {
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}
.nx2-book-step-line {
  width: 40px;
  height: 2px;
  background: var(--nx2-light-bg-2);
  border-radius: 2px;
  transition: background 0.22s ease;
}
.nx2-book-step-line[data-filled="true"] { background: var(--nx2-coral); }

/* Form */
.nx2-book-step[hidden] { display: none; }

.nx2-book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nx2-book-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nx2-book-field-full { grid-column: 1 / -1; }
.nx2-book-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nx2-ink);
}
.nx2-book-hint {
  font-weight: 500;
  color: var(--nx2-ink-soft);
}
.nx2-book-field input,
.nx2-book-field select,
.nx2-book-field textarea {
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--nx2-light-bg);
  border: 1px solid rgba(14, 16, 20, 0.10);
  border-radius: 10px;
  color: var(--nx2-ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nx2-book-field input:focus,
.nx2-book-field select:focus,
.nx2-book-field textarea:focus {
  border-color: var(--nx2-coral);
  box-shadow: 0 0 0 3px rgba(255, 107, 71, 0.14);
}
.nx2-book-field textarea { resize: vertical; min-height: 80px; }
.nx2-book-field input:invalid:not(:placeholder-shown),
.nx2-book-field select:invalid {
  /* no destructive styling until submit attempted — handled via JS */
}
.nx2-book-field.nx2-book-error input,
.nx2-book-field.nx2-book-error select,
.nx2-book-field.nx2-book-error textarea {
  border-color: var(--nx2-danger);
}

/* Checkbox grid for module selection */
.nx2-book-checkgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.nx2-book-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--nx2-light-bg);
  border: 1px solid rgba(14, 16, 20, 0.10);
  border-radius: 10px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.nx2-book-check:hover { border-color: var(--nx2-coral); }
.nx2-book-check input { accent-color: var(--nx2-coral); cursor: pointer; }
.nx2-book-check input:checked + span { color: var(--nx2-coral); font-weight: 700; }

/* Actions row */
.nx2-book-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(14, 16, 20, 0.06);
}
.nx2-book-step-counter {
  font-size: 0.8rem;
  color: var(--nx2-ink-soft);
  font-weight: 600;
}
.nx2-book-actions .nx2-btn { padding: 12px 22px; }

/* Step 1 only has Next button — push it right */
.nx2-book-step[data-step="1"] .nx2-book-actions { justify-content: flex-end; gap: 18px; }
.nx2-book-step[data-step="1"] .nx2-book-step-counter { margin-right: auto; }

/* Success state */
.nx2-book-success { text-align: center; padding: 16px 0; }
.nx2-book-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(255, 107, 71, 0.14);
  color: var(--nx2-coral);
  border-radius: 50%;
  margin-bottom: 16px;
}
.nx2-book-success-icon svg { width: 36px; height: 36px; }
.nx2-book-success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--nx2-ink);
  margin: 0 0 10px;
}
.nx2-book-success-body {
  font-size: 0.95rem;
  color: var(--nx2-ink-soft);
  line-height: 1.5;
  margin: 0 0 22px;
}

@media (max-width: 640px) {
  .nx2-book-grid { grid-template-columns: 1fr; }
  .nx2-book-checkgrid { grid-template-columns: 1fr; }
  .nx2-book-card { padding: 28px 22px 22px; }
  .nx2-book-title { font-size: 1.3rem; }
}

/* ============================================================
   nx2 — fade-up scroll-in helper (reuses existing IntersectionObserver
   that targets .fade-up in /script.js, so we don't need new JS for this)
   ============================================================ */
.nx2-body .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.nx2-body .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Introducer — Figma-matched landing (scoped to .nx2-fig-*).
   Palette: cream/coral/dark from the supplied Figma file. The page
   keeps using the existing /Background/*.png watermark backgrounds.
   ============================================================ */
:root {
  --fig-cream:       #FBF1DF;
  --fig-cream-deep:  #F4E4C3;
  --fig-coral:       #FF6767;
  --fig-coral-soft:  #FFA575;
  --fig-coral-deep:  #F26566;
  --fig-navy:        #334052;
  --fig-ink:         #111C3A;
  --fig-ink-soft:    #5A5F68;
}

/* --- shared section + layout ------------------------------------ */
/* Coral sections expand the watermark to cover the full section (no
   fallback colour underneath). White + dark keep the homepage-style
   top-anchored watermark with a solid background-colour beneath. */
.nx2-fig-section { padding: 96px 0; position: relative; }
.nx2-fig-section-white {
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-fig-section-coral {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--fig-ink);
}
.nx2-fig-section-dark {
  background-color: var(--nx2-deep);
  background-image: url('/Background/Dark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #FFFFFF;
}

/* Contrast rules: dark bg → white text, coral bg → dark text,
   so copy is always readable against the section surface. */
.nx2-fig-section-dark,
.nx2-fig-section-dark p,
.nx2-fig-section-dark h2,
.nx2-fig-section-dark h3,
.nx2-fig-section-dark li,
.nx2-fig-section-dark span {
  color: #FFFFFF;
}
.nx2-fig-section-dark .nx2-fig-body { color: rgba(255, 255, 255, 0.92); }
.nx2-fig-section-dark .nx2-fig-lede { color: var(--fig-coral-soft); }

.nx2-fig-section-coral,
.nx2-fig-section-coral p,
.nx2-fig-section-coral h2,
.nx2-fig-section-coral h3,
.nx2-fig-section-coral li,
.nx2-fig-section-coral span {
  color: var(--fig-ink);
}
.nx2-fig-section-coral .nx2-fig-body { color: rgba(14, 28, 58, 0.82); }
.nx2-fig-section-coral .nx2-fig-lede { color: var(--fig-ink); font-weight: 800; }

/* On coral surfaces (hero, .nx2-fig-section-coral, .nx2-fig-cta-card),
   the primary CTA must NOT be coral — it would disappear against the
   coral wash. Switch to navy/ink so the call-to-action stays loud. */
.nx2-fig-hero .nx2-fig-btn-primary,
.nx2-fig-section-coral .nx2-fig-btn-primary,
.nx2-fig-cta-card .nx2-fig-btn-primary {
  background: var(--fig-ink);
  color: #FFFFFF;
  box-shadow: 0 12px 26px rgba(14, 28, 58, 0.28);
}
.nx2-fig-hero .nx2-fig-btn-primary:hover,
.nx2-fig-section-coral .nx2-fig-btn-primary:hover,
.nx2-fig-cta-card .nx2-fig-btn-primary:hover {
  background: #0B142B;
  box-shadow: 0 16px 32px rgba(14, 28, 58, 0.38);
}

/* Coral-section variants: bullets, callout, and eyebrow pills swap to
   a dark-ink palette so they sit naturally against the coral wash. */
.nx2-fig-section-coral .nx2-fig-eyebrow,
.nx2-fig-section-coral .nx2-fig-eyebrow-light {
  background: rgba(14, 28, 58, 0.12);
  color: var(--fig-ink);
  border-color: rgba(14, 28, 58, 0.26);
}
.nx2-fig-section-coral .nx2-fig-bullet-check,
.nx2-fig-section-coral .nx2-fig-bullet-check-light {
  background: rgba(14, 28, 58, 0.18);
  color: var(--fig-ink);
}
.nx2-fig-section-coral .nx2-fig-callout {
  background: rgba(14, 28, 58, 0.14);
  color: var(--fig-ink);
}

/* --- HERO (coral — first in the coral→white→navy rotation) ------ */
.nx2-fig-hero {
  padding: 140px 0 96px;
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: var(--fig-ink);
}
.nx2-fig-hero,
.nx2-fig-hero p,
.nx2-fig-hero h1,
.nx2-fig-hero span { color: var(--fig-ink); }
.nx2-fig-hero .nx2-fig-eyebrow {
  background: rgba(14, 28, 58, 0.14);
  color: var(--fig-ink);
  border-color: rgba(14, 28, 58, 0.28);
}
.nx2-fig-hero .nx2-fig-hero-sub { color: rgba(14, 28, 58, 0.82); }
.nx2-fig-hero-inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nx2-fig-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: rgba(255, 103, 103, 0.12);
  color: var(--fig-coral);
  border: 1px solid rgba(255, 103, 103, 0.28);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.nx2-fig-eyebrow-light {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
}
.nx2-fig-h1 {
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fig-ink);
  margin: 0 0 22px;
}
.nx2-fig-hero-sub {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--fig-ink-soft);
  max-width: 680px;
  margin: 0 auto 32px;
}
.nx2-fig-hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* --- Buttons --------------------------------------------------- */
.nx2-fig-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 1px solid transparent;
}
.nx2-fig-btn-primary {
  background: var(--fig-coral);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(255, 103, 103, 0.32);
}
.nx2-fig-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--fig-coral-deep);
  box-shadow: 0 14px 32px rgba(255, 103, 103, 0.42);
}
.nx2-fig-btn-cream {
  background: var(--fig-cream);
  color: var(--fig-ink);
  box-shadow: 0 8px 20px rgba(14, 16, 20, 0.12);
}
.nx2-fig-btn-cream:hover {
  transform: translateY(-2px);
  background: var(--fig-cream-deep);
}
.nx2-fig-btn-ghost {
  background: transparent;
  color: var(--fig-ink);
  border-color: rgba(14, 16, 20, 0.18);
}
.nx2-fig-btn-ghost:hover { border-color: var(--fig-ink); }
.nx2-fig-btn-lg { padding: 18px 36px; font-size: 1.08rem; border-radius: 16px; }

/* --- Section header --------------------------------------------- */
.nx2-fig-section-header { max-width: 740px; }
.nx2-fig-section-header-center { margin: 0 auto 48px; text-align: center; }
.nx2-fig-h2 {
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fig-ink);
  margin: 0 0 18px;
}
.nx2-fig-h2-light { color: #FFFFFF; }
.nx2-fig-lede {
  font-size: 1.12rem;
  color: var(--fig-coral);
  font-weight: 700;
  margin: 0 0 14px;
}
.nx2-fig-lede-light { color: var(--fig-coral-soft); }
.nx2-fig-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fig-ink-soft);
  margin: 0 0 18px;
}
.nx2-fig-body-light { color: rgba(255, 255, 255, 0.92); }
.nx2-fig-narrow {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.nx2-fig-narrow .nx2-fig-body { font-size: 1.08rem; }

/* --- Split layout (text + visual) ------------------------------- */
.nx2-fig-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.nx2-fig-split-reverse .nx2-fig-split-copy { order: 2; }
.nx2-fig-split-reverse .nx2-fig-split-visual { order: 1; }
@media (max-width: 920px) {
  .nx2-fig-split { grid-template-columns: 1fr; gap: 40px; }
  .nx2-fig-split-reverse .nx2-fig-split-copy,
  .nx2-fig-split-reverse .nx2-fig-split-visual { order: initial; }
}
.nx2-fig-split-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nx2-fig-illustration {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 50px rgba(14, 16, 20, 0.16));
}
.nx2-fig-image-card {
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #FFFFFF;
  box-shadow: 0 28px 64px rgba(14, 16, 20, 0.28);
  max-width: 560px;
  width: 100%;
}
.nx2-fig-image-card img { display: block; width: 100%; height: auto; }

/* --- Bullet lists ----------------------------------------------- */
.nx2-fig-bullets {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx2-fig-bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--fig-ink);
}
.nx2-fig-bullets-light li { color: #FFFFFF; }
.nx2-fig-bullet-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 103, 103, 0.14);
  color: var(--fig-coral);
  flex-shrink: 0;
  margin-top: 2px;
}
.nx2-fig-bullet-check svg { width: 16px; height: 16px; }
.nx2-fig-bullet-check-light {
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
}
.nx2-fig-callout {
  margin: 22px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(14, 16, 20, 0.16);
  color: #FFFFFF;
  font-weight: 700;
  font-style: italic;
  display: inline-block;
}

/* --- Steps section (image + label list) ------------------------- */
.nx2-fig-steps-stage {
  margin: 0 auto 36px;
  max-width: 1080px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0B0E14;
}
.nx2-fig-steps-image { display: block; width: 100%; height: auto; }
.nx2-fig-steps-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 820px) {
  .nx2-fig-steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .nx2-fig-steps-list { grid-template-columns: 1fr; }
}
.nx2-fig-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(14, 28, 58, 0.10);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--fig-ink);
  font-size: 0.98rem;
  font-weight: 600;
}
.nx2-fig-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fig-coral);
  color: #FFFFFF;
  font-weight: 800;
  flex-shrink: 0;
}
.nx2-fig-step-row:nth-child(even) .nx2-fig-step-num { background: var(--fig-ink); color: #FFFFFF; }

/* --- Program cards ---------------------------------------------- */
.nx2-fig-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 12px;
}
@media (max-width: 820px) {
  .nx2-fig-program-grid { grid-template-columns: 1fr; }
}
.nx2-fig-program-card {
  background: var(--fig-cream);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(14, 16, 20, 0.06);
  box-shadow: 0 12px 28px rgba(14, 16, 20, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nx2-fig-program-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(14, 16, 20, 0.12);
}
.nx2-fig-program-card p {
  margin: 0;
  color: var(--fig-ink);
  font-weight: 600;
  line-height: 1.45;
  font-size: 1rem;
}
.nx2-fig-program-pointer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fig-coral);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.nx2-fig-program-footer {
  text-align: center;
  margin: 32px auto 0;
  font-style: italic;
  color: var(--fig-coral);
  font-weight: 700;
  font-size: 1.05rem;
}

/* --- Bottom CTA card (coral pillow) ----------------------------- */
.nx2-fig-cta-wrap {
  padding: 64px 0 110px;
  background-color: #FFFFFF;
  background-image: url('/Background/White.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.nx2-fig-cta-wrap-dark {
  background-color: var(--nx2-deep);
  background-image: url('/Background/Dark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.nx2-fig-cta-card {
  background-image: url('/Background/Coral.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 24px;
  padding: 64px 56px;
  color: var(--fig-ink);
  text-align: center;
  box-shadow: 0 32px 80px rgba(255, 165, 117, 0.34);
}
.nx2-fig-cta-card,
.nx2-fig-cta-card p,
.nx2-fig-cta-card h2,
.nx2-fig-cta-card span { color: var(--fig-ink); }
.nx2-fig-cta-card .nx2-fig-cta-sub { color: rgba(14, 28, 58, 0.82); }
.nx2-fig-cta-card .nx2-fig-cta-eyebrow {
  background: rgba(14, 28, 58, 0.14);
  border-color: rgba(14, 28, 58, 0.28);
  color: var(--fig-ink);
}
@media (max-width: 720px) {
  .nx2-fig-cta-card { padding: 44px 24px; border-radius: 18px; }
}
.nx2-fig-cta-eyebrow {
  display: inline-flex;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.nx2-fig-cta-h2 {
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0 0 14px;
}
.nx2-fig-cta-sub {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  max-width: 680px;
  margin: 0 auto 28px;
}
.nx2-fig-cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --- Floating access dock --------------------------------------- */
/* Stays pinned to the viewport so Login + Sign Up are reachable at
   any scroll position. Useful for returning users who already have
   an account and shouldn't have to scroll back to the hero to log in. */
.nx2-fig-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(14, 28, 58, 0.10);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(14, 28, 58, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: nx2-fig-dock-in 0.5s ease 0.6s both;
}
@keyframes nx2-fig-dock-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx2-fig-dock-hint {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fig-ink-soft);
  text-align: center;
  padding: 0 4px;
}
.nx2-fig-dock-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx2-fig-dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.nx2-fig-dock-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.nx2-fig-dock-btn-primary {
  background: var(--fig-coral);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(255, 103, 103, 0.34);
}
.nx2-fig-dock-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--fig-coral-deep);
  box-shadow: 0 12px 26px rgba(255, 103, 103, 0.44);
}
.nx2-fig-dock-btn-ghost {
  background: transparent;
  color: var(--fig-ink);
  border-color: rgba(14, 28, 58, 0.18);
}
.nx2-fig-dock-btn-ghost:hover {
  background: rgba(14, 28, 58, 0.06);
  border-color: var(--fig-ink);
}
@media (max-width: 640px) {
  .nx2-fig-dock {
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .nx2-fig-dock-hint { display: none; }
  .nx2-fig-dock-actions {
    flex-direction: row;
    flex: 1;
    justify-content: stretch;
  }
  .nx2-fig-dock-actions .nx2-fig-dock-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
  }
}