/* =========================================================================
   NEOVAR — Design System
   Premium B2B fintech corporate website
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand colors */
  --neo-blue:    #003CFF;   /* RGB 0, 60, 255 */
  --neo-purple:  #7300ff;   /* RGB 115, 0, 225 */
  --neo-cyan:    #50D3F5;   /* RGB 80, 211, 245 */
  --neo-mint:    #00DCB5;   /* RGB 0, 220, 181 */
  --neo-magenta: #f238ff;   /* RGB 239, 58, 252 */

  /* Neutrals */
  --ink:       #0A0A1E;
  --ink-2:     #131330;
  --ink-3:     #1F1F45;
  --paper:     #F2F5FA;
  --paper-2:   #E8EDF5;
  --line:      #DAE0EA;
  --line-soft: #E5EAF2;
  --muted:     #5C5C6E;
  --muted-2:   #8C8C9C;

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink);

  /* Type */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --container: 1280px;
  --pad: clamp(20px, 4vw, 48px);

  /* Misc */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --shadow-card:   0 1px 2px rgba(10,10,30,.04), 0 8px 24px rgba(10,10,30,.04);
  --shadow-hover:  0 1px 2px rgba(10,10,30,.06), 0 24px 48px rgba(10,10,30,.10);
  --header-h: 76px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg);
  background: linear-gradient(180deg, #EEF3FA 0%, #FAFCFD 12%, #FFFFFF 25%);
  background-attachment: fixed;
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11", "cv02", "cv03", "cv04";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neo-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.0;
  font-size: clamp(40px, 7vw, 88px);
  color: var(--ink);
}
.display em {
  font-style: normal;
  color: var(--neo-blue);
  font-weight: 800;
}

h1.section-title, h2.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-size: clamp(32px, 4.4vw, 54px);
  color: var(--ink);
}
.section-title em { font-style: normal; color: var(--neo-blue); font-weight: 800; }

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 64ch;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
section {
  padding: clamp(28px, 3vw, 48px) 0;
}
section.tight { padding: clamp(20px, 2vw, 36px) 0; }
section.bg-alt { background: #FAFCFE; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 56px;
  max-width: 880px;
}
@media (min-width: 900px) {
  .section-head.split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: none;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(238,243,250,.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line-soft); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img:not(.brand-logo) { height: 28px; width: auto; display: block; }
.brand img.brand-logo { height: 44px; width: auto; display: block; }
.brand .brand-logo-wrap { display: inline-flex; align-items: center; }

/* Mobile: full SIGNA logo + no Demo CTA (CTA still available in burger menu) */
@media (max-width: 1099px) {
  .brand img.brand-logo { height: 32px; }
  .nav-cta > a.btn-primary { display: none; }
}

/* Push primary nav to the right, leaving generous space after the logo */
nav.nav-list { margin-left: auto; }

.nav-list {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1100px) { .nav-list { display: flex; } }
.nav-list > li { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .15s ease;
}
.nav-link:hover { background: rgba(10,10,30,.05); }
.nav-link[aria-current="page"] { color: var(--neo-blue); }
.nav-link svg { width: 12px; height: 12px; opacity: .7; }

/* AI nav item: superscript sparkle (solid deep purple, tight against AI) */
.ai-sup {
  font-size: .7em;
  line-height: 1;
  margin-left: 0;
  position: relative;
  top: -.45em;
  font-weight: 700;
  color: #5800c0;
  display: inline-block;
}
.nav-link[data-nav="ai"] { align-items: flex-start; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
/* Invisible hover bridge — covers the 6px gap above the dropdown,
   so the mouse stays in the hoverable area when moving from the parent
   nav link toward a dropdown item. Critical fix for dropdown UX. */
.dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
}
.nav-list > li:hover > .dropdown,
.nav-list > li:focus-within > .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
}
.dropdown a:hover { background: var(--paper-2); color: var(--neo-blue); }
.dropdown a strong { display: block; font-weight: 600; color: var(--ink); }
.dropdown a span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.nav-cta { display: inline-flex; align-items: center; gap: 10px; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
@media (min-width: 1100px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 18px; height: 18px; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  padding: 24px;
  overflow-y: auto;
  display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.mobile-menu details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.mobile-menu summary {
  list-style: none;
  font-size: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after {
  content: "+"; font-size: 22px; font-weight: 300; color: var(--muted);
}
.mobile-menu details[open] summary::after { content: "−"; }
.mobile-menu .top-link {
  display: block;
  font-size: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.mobile-menu .sub a {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 16px;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(2px); }

.btn-primary {
  background: var(--neo-blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,60,255,.28);
}
.btn-primary:hover { background: #003cff; box-shadow: 0 6px 20px rgba(0,60,255,.36); }

.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover { background: var(--ink-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-light:hover { border-color: var(--ink); }

.btn-link {
  padding: 0;
  color: var(--neo-blue);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Logo Marquee (References + Ecosystem) ---------- */
.logo-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-shrink: 0;
  animation: logo-scroll 35s linear infinite;
  padding-right: 56px;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.logo-item {
  flex-shrink: 0;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-item img {
  max-height: 100%;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .65;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease;
}
.logo-item img:hover {
  opacity: 1;
  filter: grayscale(0);
}
/* Dark section variant */
.dark .logo-item img { opacity: .75; }
.dark .logo-item img:hover { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
  }
}
.hero-text { width: 100%; }

.hero-tagline {
  margin-top: 24px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
}

/* Inline keyword accent — used to highlight terms in lede/tagline text */
.kw-accent {
  color: var(--neo-blue);
  font-weight: 600;
}

.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 64px;
  padding: 36px 0 8px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 0;
}
@media (min-width: 700px) { .hero-meta { grid-template-columns: repeat(4, 1fr); } }
.hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 0 16px;
  position: relative;
}
@media (min-width: 700px) {
  .hero-meta-item + .hero-meta-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
  }
}
.hero-meta-item .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  animation: heroTileFloat 5s ease-in-out infinite;
}
.hero-meta-item:nth-child(1) .icon-tile { animation-delay: 0s; }
.hero-meta-item:nth-child(2) .icon-tile { animation-delay: 1.1s; }
.hero-meta-item:nth-child(3) .icon-tile { animation-delay: 2.2s; }
.hero-meta-item:nth-child(4) .icon-tile { animation-delay: 3.3s; }
.hero-meta-item .icon-tile:hover { transform: scale(1.1); }
.hero-meta-item .icon-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background: currentColor;
  z-index: -2;
}
.hero-meta-item .icon-tile::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, currentColor 0%, transparent 60%);
  opacity: .18;
  z-index: -1;
  animation: heroTilePulse 3.6s ease-in-out infinite;
}
.hero-meta-item:nth-child(1) .icon-tile::after { animation-delay: 0s; }
.hero-meta-item:nth-child(2) .icon-tile::after { animation-delay: 1.1s; }
.hero-meta-item:nth-child(3) .icon-tile::after { animation-delay: 2.2s; }
.hero-meta-item:nth-child(4) .icon-tile::after { animation-delay: 3.3s; }
@keyframes heroTileFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes heroTilePulse {
  0%, 100% { transform: scale(.85); opacity: .10; }
  50%      { transform: scale(1.15); opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-meta-item .icon-tile,
  .hero-meta-item .icon-tile::after { animation: none; }
}
.hero-meta-item .icon-tile svg {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 1;
  stroke-width: 1.7;
}
.hero-meta-item .icon-tile.c-blue    { color: var(--neo-blue);    box-shadow: 0 10px 28px -12px rgba(0,60,255,.4); }
.hero-meta-item .icon-tile.c-purple  { color: var(--neo-purple);  box-shadow: 0 10px 28px -12px rgba(115,0,255,.4); }
.hero-meta-item .icon-tile.c-cyan    { color: #50d3f5;            box-shadow: 0 10px 28px -12px rgba(80,211,245,.5); }
.hero-meta-item .icon-tile.c-mint    { color: #00dcb5;            box-shadow: 0 10px 28px -12px rgba(0,220,181,.5); }
.hero-meta-item .icon-tile.c-magenta { color: var(--neo-magenta); box-shadow: 0 10px 28px -12px rgba(242,56,255,.4); }
.hero-meta-item .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.hero-meta-item .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  display: block;
  line-height: 1.5;
  margin-top: -4px;
}

/* Hero visual */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,60,255,.30) 0%, rgba(115,0,255,.18) 45%, transparent 75%);
  filter: blur(40px);
  z-index: -1;
  animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { transform: translate(-4%, -2%) scale(1);    opacity: .85; }
  100% { transform: translate(4%, 2%)   scale(1.05); opacity: 1;   }
}
.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 600px;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,60,255,.18));
}

/* ---------- Page-hero embedded mockup (used on inner pages like ICM) ---------- */
.page-hero-image {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 24px 50px -20px rgba(10,10,30,.22),
    0 50px 100px -40px rgba(0,60,255,.16);
  isolation: isolate;
}
.page-hero-image::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--r-xl) + 2px);
  background: linear-gradient(135deg, rgba(0,60,255,.30), rgba(115,0,255,.20), rgba(80,211,245,.20));
  z-index: -1;
  filter: blur(16px);
  opacity: .55;
}
.page-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

/* Decorative orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}
.orb-1 { width: 380px; height: 380px; background: var(--neo-blue); top: -120px; right: -80px; }
.orb-2 { width: 280px; height: 280px; background: var(--neo-cyan); bottom: -80px; left: 30%; }

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #d6d6cb;
}
.card .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--neo-blue);
}
.card .icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.card .card-foot {
  margin-top: auto;
  padding-top: 20px;
}

/* Solution card variant */
.sol-card {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
}
/* Base badge — filled colored pill (default blue) */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--neo-blue);
  color: #fff;
  white-space: nowrap;
}
.sol-card .badge {
  align-self: flex-start;
}
.sol-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-top: 16px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sol-card .desc { color: var(--muted); font-size: 15px; line-height: 1.55; }
.sol-card ul.bullets {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sol-card ul.bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink);
}
.sol-card ul.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neo-blue);
}
/* Card "Learn more" — blue text link with arrow (left-aligned) */
.sol-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--neo-blue);
  text-decoration: none;
  transition: gap .15s ease;
}
.sol-card:hover .link-arrow { gap: 10px; }
.btn-card {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--card-accent, var(--neo-blue));
  transition: filter .15s ease, transform .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-card:hover { filter: brightness(1.1); transform: translateX(2px); }

/* Industry card */
.ind-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ind-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #d6d6cb;
}
.ind-card .ind-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--neo-blue), var(--neo-purple));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.ind-card .ind-icon svg { width: 20px; height: 20px; }
.ind-card h3 { font-size: 18px; margin: 0; }
.ind-card p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.ind-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ind-card .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
}
.ind-card .ind-cta {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neo-blue);
}

/* ---------- Dark sections ---------- */
.dark {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dark .section-title, .dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .lede, .dark p.muted { color: rgba(255,255,255,.65); }
.dark .eyebrow { color: var(--neo-cyan); }
.dark .card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
.dark .card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.dark .card p { color: rgba(255,255,255,.65); }
.dark .card .icon { background: rgba(255,255,255,.06); color: var(--neo-cyan); }

/* ---------- Expertise grid (fintech/AI dark gradient cards) ---------- */
.expertise-grid .card {
  position: relative;
  background: linear-gradient(135deg, #0B1230 0%, #14193A 100%);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  overflow: hidden;
}
.expertise-grid .card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  opacity: .22;
  filter: blur(24px);
  pointer-events: none;
  transition: opacity .3s ease;
}
.expertise-grid .card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, #0B1230 0%, #14193A 100%);
}
.expertise-grid .card:hover::before { opacity: .42; }
.expertise-grid .card .icon {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
  position: relative; z-index: 1;
}
.expertise-grid .card h3 {
  color: #fff;
  position: relative; z-index: 1;
}
.expertise-grid .card p {
  color: rgba(255,255,255,.7);
  position: relative; z-index: 1;
}

/* Per-card accent tones (icon color + corner glow) */
.expertise-grid .card.tone-blue    { --accent: #003cff;   --accent-glow: rgba(77,122,255,.35); }
.expertise-grid .card.tone-purple  { --accent: #7300ff;   --accent-glow: rgba(181,117,255,.35); }
.expertise-grid .card.tone-cyan    { --accent: #50D3F5;   --accent-glow: rgba(80,211,245,.35); }
.expertise-grid .card.tone-mint    { --accent: #00DCB5;   --accent-glow: rgba(0,220,181,.35); }
.expertise-grid .card.tone-magenta { --accent: #f238ff;   --accent-glow: rgba(242,56,255,.35); }

/* Geographic markets cards — keep all 3 titles on one line, consistent sizing */
.geo-cards .card h3 {
  font-size: 17px;
  letter-spacing: -.018em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .display em { color: var(--neo-cyan); }
.dark .section-title em { color: var(--neo-cyan); }
.dark hr { border-color: rgba(255,255,255,.08); }
.dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.dark .btn-ghost:hover { border-color: #fff; }

/* ---------- Module list (ICM modules) ---------- */
.modules-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .modules-grid { grid-template-columns: repeat(3, 1fr); } }

.module {
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color .2s ease;
}
.module:hover { background: var(--paper-2); }
.module .module-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.module .module-num {
  display: none;
}
.module .module-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neo-blue);
}
.module .module-icon svg { width: 18px; height: 18px; }
.module h3 { font-size: 17px; margin: 0; }
.module ul { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.module li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.module li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neo-blue);
  box-shadow: 0 0 6px rgba(0,60,255,.3);
}

/* ---------- Generic check-list ---------- */
ul.check-list { display: flex; flex-direction: column; gap: 8px; }
ul.check-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
}
ul.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neo-blue), var(--neo-cyan));
  box-shadow: 0 0 0 2px rgba(0,60,255,.08);
}
ul.check-list li::after {
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.dark ul.check-list li { color: rgba(255,255,255,.85); }

/* ---------- Contact page grid ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.contact-form-wrap {
  position: sticky;
  top: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px -20px rgba(10,10,30,.12);
}
.contact-form-wrap .form { background: transparent; padding: 0; box-shadow: none; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-wrap { position: static; padding: 28px; }
}

/* ---------- Timeline (Our Story) ---------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 18px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--neo-blue), var(--neo-purple), var(--neo-magenta));
}
.tl-item {
  position: relative;
  padding: 28px 0 28px 56px;
  border-bottom: 1px solid var(--line);
}
.tl-item:last-child { border-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: 12px; top: 36px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--neo-blue);
  box-shadow: 0 0 0 4px var(--paper);
}
.tl-item.purple::before { background: var(--neo-purple); }
.tl-item.cyan::before   { background: var(--neo-cyan); }
.tl-item.mint::before   { background: var(--neo-mint); }
.tl-item.magenta::before{ background: var(--neo-magenta); }
.tl-year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neo-blue);
}
.tl-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-top: 8px;
  color: var(--ink);
}
.tl-item p { color: var(--muted); margin-top: 8px; max-width: 56ch; line-height: 1.55; }

/* ---------- Comparison table (Partner Levels) ---------- */
.compare {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.compare-head > *, .compare-row > * {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.compare-head > * + *, .compare-row > * + * { border-left: 1px solid var(--line); }
.compare-head {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.compare-head .silver   { color: var(--muted); }
.compare-head .gold     { color: var(--neo-purple); }
.compare-head .platinum { color: var(--neo-blue); font-weight: 700; }
.compare-row:last-child > * { border-bottom: 0; }
.compare-row .feat { font-weight: 600; color: var(--ink); }
.compare-row svg { width: 16px; height: 16px; }
.check { color: var(--neo-blue); }
.dash  { color: var(--muted-2); }

@media (max-width: 800px) {
  .compare-head, .compare-row { grid-template-columns: 1fr; }
  .compare-head > * + *, .compare-row > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .compare-head .feat { display: none; }
  .compare-row .feat { background: var(--paper-2); }
}

/* ---------- Forms ---------- */
.form,
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dark .form {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.5);
}
.dark .form .field label { color: rgba(255,255,255,.85); }
.dark .form .field input,
.dark .form .field textarea,
.dark .form .field select {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
.dark .form .field input::placeholder,
.dark .form .field textarea::placeholder { color: rgba(255,255,255,.4); }
.dark .form .field input:focus,
.dark .form .field textarea:focus,
.dark .form .field select:focus {
  border-color: var(--neo-cyan);
  box-shadow: 0 0 0 4px rgba(80,211,245,.18);
}
.dark .form .file-drop { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.dark .form .file-drop:hover { border-color: var(--neo-cyan); }
.dark .form .file-drop .icon-wrap { background: rgba(255,255,255,.10); color: var(--neo-cyan); }
.dark .form .file-drop .file-info strong { color: #fff; }
.dark .form .file-drop .file-info span { color: rgba(255,255,255,.6); }

/* Force <option> elements in form dropdowns to render as black-on-white
   in the native popup, regardless of parent <select> dark styling. */
.form select option,
.form select optgroup {
  color: #0A0A1E;
  background: #FFFFFF;
}

.form-row,
.form .row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .form-row,
  .form .row { grid-template-columns: 1fr; }
}
@media (min-width: 700px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.field label .req { color: var(--neo-magenta); margin-left: 2px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--neo-blue);
  box-shadow: 0 0 0 4px rgba(0,60,255,.10);
}
.field textarea { resize: vertical; min-height: 120px; }
.field .err {
  display: none;
  font-size: 12.5px;
  color: var(--neo-magenta);
}
.field.invalid .err { display: block; }
.field.invalid input,
.field.invalid textarea,
.field.invalid select { border-color: var(--neo-magenta); }

.captcha-box,
.captcha {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.captcha-box input[type="checkbox"],
.captcha input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--neo-blue); cursor: pointer; }
.dark .captcha { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }

.form-msg {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.form-msg[hidden] { display: none !important; }
.form-msg.success { background: rgba(0,220,181,.12); color: #00dcb5; border: 1px solid rgba(0,220,181,.3); }
.form-msg.error   { background: rgba(242,56,255,.08); color: #f238ff; border: 1px solid rgba(242,56,255,.25); }
.dark .form-msg.success { background: rgba(0,220,181,.18); color: var(--neo-mint); border-color: rgba(0,220,181,.4); }
.dark .form-msg.error   { background: rgba(242,56,255,.14); color: var(--neo-magenta); border-color: rgba(242,56,255,.4); }

/* File upload */
.file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  cursor: pointer;
}
.file-drop:hover { border-color: var(--neo-blue); }
.file-drop input { display: none; }
.file-drop .icon-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neo-blue);
}
.file-drop .icon-wrap svg { width: 18px; height: 18px; }
.file-drop .file-info strong { display: block; font-size: 14px; }
.file-drop .file-info span  { display: block; font-size: 12.5px; color: var(--muted); }

/* ---------- Modal (Request Demo) ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,30,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.open { display: flex; opacity: 1; }
.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px);
  transform: translateY(8px) scale(.99);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close svg { width: 16px; height: 16px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer .footer-top {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px)  { .site-footer .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer .footer-top { grid-template-columns: 1.8fr repeat(3, 1fr); } }

.footer-brand img,
.footer-brand .footer-logo { height: 40px; width: auto; margin-bottom: 18px; display: block; filter: none; }
.footer-brand p { font-size: 14.5px; line-height: 1.55; max-width: 38ch; }
.footer-brand .social {
  margin-top: 24px;
  display: flex; gap: 8px;
}
.footer-brand .social a {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.footer-brand .social a:hover { border-color: #fff; color: #fff; }
.footer-brand .social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  transition: color .15s ease;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.footer-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Utility / Decoration ---------- */
.text-grad {
  background: linear-gradient(90deg, var(--neo-blue), var(--neo-purple) 60%, var(--neo-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.divider {
  height: 1px; background: var(--line); border: 0; margin: 0;
}
.muted { color: var(--muted); }
.cap-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Pill list (capability tags) */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.dark .pill { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #fff; }

/* ---------- Marquee (horizontal infinite scroll) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: inline-flex;
  gap: 8px;
  padding-left: 8px;
  white-space: nowrap;
  animation: marquee-scroll 36s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Pills inside marquee accept colored dot variants */
.marquee .pill { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.pill.dot-blue    .dot { background: var(--neo-blue);    box-shadow: 0 0 8px rgba(0,60,255,.7); }
.pill.dot-purple  .dot { background: var(--neo-purple);  box-shadow: 0 0 8px rgba(115,0,255,.7); }
.pill.dot-cyan    .dot { background: var(--neo-cyan);    box-shadow: 0 0 8px rgba(80,211,245,.7); }
.pill.dot-mint    .dot { background: var(--neo-mint);    box-shadow: 0 0 8px rgba(0,220,181,.7); }
.pill.dot-magenta .dot { background: var(--neo-magenta); box-shadow: 0 0 8px rgba(242,56,255,.7); }

/* Two-column prose */
.prose {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .prose { grid-template-columns: 1fr 2fr; gap: 56px; } }
.prose h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.015em;
}
.prose p { color: var(--muted); margin-top: 8px; line-height: 1.65; }
.prose .meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--neo-blue); }

/* CTA banner */
.cta-banner {
  background: var(--ink);
  color: #fff;
  padding: clamp(48px, 6vw, 80px);
  border-radius: var(--r-xl);
  display: grid;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .cta-banner { grid-template-columns: 2fr 1fr; gap: 48px; } }
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 70% 50%, rgba(0,60,255,.5), transparent 50%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,.7); margin-top: 12px; max-width: 50ch; }
.cta-banner .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.cta-banner .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.05);
}
.cta-banner-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .cta-banner-actions { flex-direction: row; } }

/* Stats row */
/* legacy .stats — kept for any other pages still using it */
.stats {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -.025em;
  line-height: 1;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
  display: block;
}

/* ---------- Domain cards (homepage 4-category bar) ---------- */
.domain-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 640px)  { .domain-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .domain-cards { grid-template-columns: repeat(4, 1fr); } }

.domain-card {
  /* per-card brand color — overridden by .c-* below */
  --bc: var(--neo-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation: isolate;
}
.domain-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--bc) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
}
.domain-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow:
    0 18px 50px -22px rgba(10,10,30,.18),
    0 6px 18px -10px var(--bc);
}
.domain-card:hover::after { opacity: .06; }

.domain-card .domain-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bc);
}
.domain-card .domain-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--bc);
}
.domain-card .domain-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bc);
  opacity: .14;
}
.domain-card .domain-icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}
.domain-card .domain-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 28px);
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--ink);
  margin: 4px 0 0;
}
.domain-card .domain-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.domain-card .domain-arrow {
  margin-top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--bc);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.domain-card .domain-arrow svg { width: 16px; height: 16px; }
.domain-card:hover .domain-arrow {
  background: var(--bc);
  color: #fff;
  transform: translateX(2px);
}

/* Per-card color assignment */
.domain-card.c-blue   { --bc: var(--neo-blue);   }
.domain-card.c-purple { --bc: var(--neo-purple); }
.domain-card.c-cyan   { --bc: #50d3f5;           }
.domain-card.c-mint   { --bc: #00dcb5;           }

/* Page hero (for inner pages) */
.page-hero {
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.05;
  font-size: clamp(38px, 5.5vw, 68px);
  color: var(--ink);
}
.page-hero h1 em { color: var(--neo-blue); font-style: normal; font-weight: 800; }
.page-hero .lede { margin-top: 24px; }
.page-hero .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Breadcrumbs */
.crumbs {
  display: flex; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.crumbs a { color: var(--neo-blue); }
.crumbs span.sep { color: var(--muted-2); }

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Table of capabilities (stripe) */
.tcap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.tcap-row {
  display: grid;
  grid-template-columns: 250px 1fr;
  border-bottom: 1px solid var(--line);
}
.tcap-row:last-child { border-bottom: 0; }
.tcap-row > .k {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
}
.tcap-row > .k .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neo-blue);
  box-shadow: 0 0 6px rgba(0,60,255,.45);
  flex-shrink: 0;
}

/* When the table is marked .tcap-colored, dots take per-row tone colors */
.tcap-colored .tcap-row.tone-blue    .dot { background: #003cff; box-shadow: 0 0 6px rgba(0,60,255,.45); }
.tcap-colored .tcap-row.tone-purple  .dot { background: #7300ff; box-shadow: 0 0 6px rgba(115,0,255,.45); }
.tcap-colored .tcap-row.tone-cyan    .dot { background: #50d3f5; box-shadow: 0 0 6px rgba(80,211,245,.55); }
.tcap-colored .tcap-row.tone-mint    .dot { background: #00dcb5; box-shadow: 0 0 6px rgba(0,220,181,.55); }
.tcap-colored .tcap-row.tone-magenta .dot { background: #f238ff; box-shadow: 0 0 6px rgba(242,56,255,.45); }
.tcap-row > .k .badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  /* override base .badge pill styling — these badges are plain text */
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.tcap-row > .v {
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 700px) {
  .tcap-row { grid-template-columns: 1fr; }
  .tcap-row > .k { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Use case card */
.uc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 800px) { .uc { grid-template-columns: 1fr 2fr; gap: 40px; } }
.uc .uc-title h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-top: 6px;
}
.uc .uc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.uc .uc-body p { color: var(--muted); line-height: 1.6; }
.uc .uc-body h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 16px 0 8px;
}
.uc ul.value-list { display: flex; flex-direction: column; gap: 6px; }
.uc ul.value-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
}
.uc ul.value-list li::before {
  content: "→";
  position: absolute; left: 0;
  color: var(--neo-blue);
}

/* Sidebar nav (sticky on long product page) */
.layout-with-aside {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) { .layout-with-aside { grid-template-columns: 220px 1fr; gap: 64px; } }
.aside-nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  display: none;
}
@media (min-width: 1000px) { .aside-nav { display: block; } }
.aside-nav h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--muted);
}
.aside-nav ul { display: flex; flex-direction: column; gap: 4px; }
.aside-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted);
  border-left: 2px solid transparent;
}
.aside-nav a:hover { color: var(--ink); background: var(--paper-2); }
.aside-nav a.active { color: var(--neo-blue); border-left-color: var(--neo-blue); background: rgba(0,60,255,.04); }

/* Code chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,60,255,.06);
  color: var(--neo-blue);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.chip-purple   { background: rgba(115,0,255,.08); color: var(--neo-purple); }
.chip-cyan     { background: rgba(80,211,245,.18); color: #50d3f5; }
.chip-mint     { background: rgba(0,220,181,.14); color: #00dcb5; }
.chip-magenta  { background: rgba(242,56,255,.10); color: #f238ff; }

/* Resource card */
.res-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.res-card .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--paper-2), #fff);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--neo-blue);
}
.res-card .thumb svg { width: 56px; height: 56px; opacity: .8; }
.res-card .body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-card h3 { font-size: 17px; }
.res-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.res-card .res-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--neo-blue); font-weight: 600;
}

/* Tab nav (industries) */
.tab-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 32px;
}
.tab-nav button {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  transition: all .15s ease;
}
.tab-nav button:hover { border-color: var(--ink); }
.tab-nav button.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Decorative gradient line */
.gline {
  height: 2px;
  background: linear-gradient(90deg, var(--neo-blue), var(--neo-cyan), var(--neo-mint), var(--neo-purple), var(--neo-magenta));
  border: 0;
}