/*
 * Home page (tenx_home) styles — hand-maintained, NOT compiled by Tailwind.
 *
 * Edit this file directly; no build step is required. It is enqueued only for
 * the tenx-home page template (see tenx_assets() in functions.php) and loads
 * after the compiled main.css, so it may rely on / override Tailwind utilities.
 *
 * Paths are relative to this file (assets/css/), e.g. ../fonts, ../images.
 */

/* ==========================================================================
   Self-hosted SF Pro (home subheadings + compare card titles)
   Light  → subheadings (spec weight 274 → 300)
   Semibold → compare card titles (spec weight 590 → 600)
   ========================================================================== */
@font-face {
  font-family: 'SF Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/SFPro-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'SF Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/SFPro-Semibold.woff2') format('woff2');
}

/* ==========================================================================
   Section framing
   ========================================================================== */
/* Section backgrounds — the two URLs are set inline in the template. */
.tenx-home__bg     { background-repeat: no-repeat; }
.tenx-home__banner { background-position: top center; background-size: 100% auto;padding-bottom: 160px !important;}
.tenx-home__blue   { background-position: center;    background-size: cover; position: relative; z-index: 20; }

/* 80px top & bottom on every home section. */
.tenx-home > section { padding-top: 80px; padding-bottom: 80px; }

/* Copy + figure containers. */
.tenx-home__inner  { margin-left: auto; margin-right: auto; }
/* Pull the product shot up so it sits immediately below the banner buttons. */
.tenx-home__figure { margin-left: auto; margin-right: auto; margin-top: -180px; margin-bottom: 0; position: relative; z-index: 1; }

/* Product screenshot — rounded card on the blue field. */
.tenx-home__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.04), 0 24px 60px rgba(16, 18, 40, 0.12);
}

/* ==========================================================================
   Hero heading + subheading (also reused by the workflows section)
   ========================================================================== */
.tenx-home__title {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 88px;
  line-height: 97.8px;
  letter-spacing: 0;
  color: #111111;
  text-align: center;
  text-transform: capitalize;
}
.tenx-home__sub {
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 274;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #555555;
  text-align: center;
}
/* Gradient on the 'People Intelligence' span only (per prototype): green edge
   → black core → subtle indigo → teal end. The inline box slices the gradient
   across the two lines, tinting 'P', 'elli' and 'gence' as in the reference. */
.tenx-home__title-grad {
    color: transparent;
    background: transparent linear-gradient(99deg, #006aff 0%, #00bbb6 100%) 0% 0% no-repeat padding-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 1024px) {
  .tenx-home__title { font-size: 64px; line-height: 1.11; }
  .tenx-home__sub   { font-size: 22px; }
}
@media (max-width: 640px) {
	.tenx-home > section .tenx-reveal a {
		width: 220px;
		text-align: center;
	}
  .tenx-home__title { font-size: 32px; line-height: 1.12; }
  .tenx-home__sub   { font-size: 18px; }
  .tenx-home__figure { margin-top: -40px; }
	section#modules {
    padding-bottom: 0 !important;
}

section.tenx-cta {
    padding-top: 0 !important;
}

section.tenx-compare {
    padding-bottom: 0 !important;
}
}

/* ==========================================================================
   Compare section (Traditional HRMS vs 10XPeople.ai)
   ========================================================================== */
.tenx-compare__eyebrow {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 30.8px;
  letter-spacing: 0;
  color: #535353;
  text-align: center;
}
.tenx-compare__title {
  margin: 20px 0 40px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  text-align: center;
  /* No colour is specified in the spec; the reference shows a dark→grey sweep. */
  background: linear-gradient(90deg, #141414 28%, #8f8f8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-compare__sub {
  margin: 20px auto 0;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #555555;
  text-align: center;
}
.tenx-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 56px auto 0;
}
.tenx-compare__card {
  border-radius: 24px;
  padding: 40px 44px;
}
.tenx-compare__card--plain {
  background: #ffffff;
  border: 1px solid #e7e8ee;
  color: #2a2a2e;
}
.tenx-compare__card--ai {
  background-image: url('https://sr-website-01.shiprocket.in/sr-website/ractangle-x0Qegf.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}
.tenx-compare__card-title {
  margin: 0 0 26px;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 590;
  font-size: 45px;
  line-height: 100%;
  letter-spacing: 0;
}
.tenx-compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tenx-compare__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}
.tenx-compare__ic {
  flex: 0 0 auto;
}
@media (max-width: 860px) {
  .tenx-compare__grid { grid-template-columns: 1fr; }
  .tenx-compare__eyebrow { font-size: 24px; line-height: 1.2; }
  .tenx-compare__title { font-size: 42px; line-height: 1.06; letter-spacing: -1.5px; }
  .tenx-compare__sub { font-size: 18px; }
  .tenx-compare__card { padding: 32px 28px; }
  .tenx-compare__card-title { font-size: 32px; }
  .tenx-compare__list li { font-size: 17px; }
}

/* ==========================================================================
   AI-First Workflows section
   ========================================================================== */
/* Reuse the hero heading + subheading typography, left-aligned here. */
.tenx-flow{
  padding-top:0px !important;
}
.tenx-flow .tenx-home__title { text-align: left; }
.tenx-flow .tenx-home__sub   { text-align: left; margin:20px 0px;}

/* "What AI Does" label */
.tenx-flow__label {
  margin: 30px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 35.8px;
  letter-spacing: 0;
  color: #000000;
  text-transform: capitalize;
}

/* Eight capability boxes */
.tenx-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.tenx-flow__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px;
  border-radius: 20px;
  background: radial-gradient(56.84% 289.6% at 51.69% 32.79%, rgba(246, 248, 255, 0.5) 0%, rgba(188, 205, 248, 0.5) 100%);
  min-height: 92px;
}
.tenx-flow__box-star { flex: 0 0 auto; width: 32px; height: 32px; }
.tenx-flow__box-title {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #535353;
  text-transform: capitalize;
}

/* Result tags */
.tenx-flow__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.tenx-flow__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 26px;
  border-radius: 999px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 40.8px;
  letter-spacing: 0;
  color: #121212;
  text-align: center;
  text-transform: capitalize;
}
.tenx-flow__tag--result { background: #A6C0FC; }
.tenx-flow__tag--muted  { background: #CFDAF54D;color:#535353;border: 1.5px solid #A6C0FC }
.tenx-flow__tag-star { flex: 0 0 auto; width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .tenx-flow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tenx-flow__grid { grid-template-columns: 1fr; }
  .tenx-flow__box-title { font-size: 18px; line-height: 28px; }
	.tenx-flow__box {
    min-height: 78px;
}
}

/* ==========================================================================
   Sophie section (dark "intelligence layer" panel)
   ========================================================================== */
.tenx-sophie{
  padding-top:0px !important;
  padding-bottom: 0px !important;
}
.tenx-sophie__panel {
  background: #131F3B;
  border-radius: 40px;
  padding: 72px 64px;
  color: #ffffff;
}
.tenx-sophie__eyebrow {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 30.8px;
  letter-spacing: 0;
  color: #C7C7C7;
  text-align: center;
  text-transform: capitalize;
}
/* Main heading — gradient text (weight 600); the trailing span is weight 400. */
.tenx-sophie__title {
  margin: 14px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 99.8px;
  letter-spacing: -3.04px;
  text-align: center;
  background: linear-gradient(92.73deg, #A6C0FC 39.89%, #FAF8F4 67.54%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-sophie__title-rest { font-weight: 400; }
.tenx-sophie__sub {
  margin: 18px auto 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #C7C7C7;
  text-align: center;
  text-transform: capitalize;
}

/* Four role cells — one rounded/bordered container; 1px gaps show the divider. */
.tenx-sophie__roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 44px 0 0;
  background: #5978BF;
  border: 1px solid #5978BF;
  border-radius: 21px;
  overflow: hidden;
}
.tenx-sophie__role { background: #131F3B; padding: 22px 26px; }
.tenx-sophie__role-k {
  display: block;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A6C0FC;
}
.tenx-sophie__role-v {
  display: block;
  margin-top: 8px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
}

/* Left list + right image */
.tenx-sophie__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 52px;
}
.tenx-sophie__can {
  margin: 0 0 22px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #ffffff;
}
.tenx-sophie__list { list-style: none; margin: 0; padding: 0; }
.tenx-sophie__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #D8DEEC;
}
.tenx-sophie__list svg { flex: 0 0 auto; }
/* Tagline — gradient on the two accent words. (Spec line-height 99.8px is the
   heading value; using a sensible line-height here so the single line fits.) */
.tenx-sophie__tagline {
  margin: 34px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 45px;
  line-height: 1.15;
  letter-spacing: -3.04px;
  color: #ffffff;
}
.tenx-sophie__tagline span {
  background: linear-gradient(92.73deg, #A6C0FC 39.89%, #FAF8F4 67.54%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-sophie__right {
  max-height: 600px;
  margin-bottom: 0;
  border-radius: 20px;
  overflow: hidden;
}
.tenx-sophie__right img { display: block; width: 100%; height: auto;margin-bottom: -77px; }
/* The video is a portrait phone recording: constrain by HEIGHT so the whole
   frame fits inside the 600px container instead of being cropped by it. */
.tenx-sophie__right video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  margin: 0 0 0 auto; /* hug the right edge of the panel column */
  border-radius: 20px;
}

/* Responsive */
@media (max-width: 900px) {
  .tenx-sophie__panel { padding: 48px 32px; }
  .tenx-sophie__title { font-size: 52px; line-height: 1.15; letter-spacing: -1.5px; }
  .tenx-sophie__body { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .tenx-sophie__roles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tenx-sophie__panel { padding: 36px 20px; border-radius: 28px; }
  .tenx-sophie__eyebrow { font-size: 22px; }
  .tenx-sophie__title { font-size: 38px; }
  .tenx-sophie__sub { font-size: 18px; line-height: 1.4; }
  .tenx-sophie__roles { grid-template-columns: 1fr; }
  .tenx-sophie__tagline { font-size: 30px; }
}

/* ==========================================================================
   Multimodal AI section
   ========================================================================== */
.tenx-multi__eyebrow {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 30.8px;
  letter-spacing: 0;
  color: #535353;
  text-transform: capitalize;
}
.tenx-multi__title {
  margin: 14px 0 0;
  max-width: 900px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  background: linear-gradient(278.27deg, #737373 19.91%, #111111 66.51%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Subheading typography was not specified — neutral grey Mona Sans. */
.tenx-multi__sub {
  margin: 20px 0 0;
  max-width: 932px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #535353;
}

/* Two-column body: left box grid, right heading + diagram. */
.tenx-multi__body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.tenx-multi__boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.tenx-multi__box {
  background: #ffffff;
  border: 1px solid #E7E8EE;
  border-radius: 16px;
  padding: 28px;
}
.tenx-multi__box-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #EEF0FB;
}
.tenx-multi__box-ico img { width: 26px; height: 26px; }
.tenx-multi__box-title {
  margin: 22px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 40.8px;
  letter-spacing: 0;
  color: #000000;
  text-transform: capitalize;
}
.tenx-multi__box-text {
  margin: 4px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #535353;
}

/* Right column */
.tenx-multi__right-title {
    margin: 0;
    font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -3.04px;
    color: #111111;
    text-align: center;
}
.tenx-multi__right-title span {
  background: linear-gradient(92.73deg, #8DAEFA 39.89%, #58B4E2 67.54%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-multi__right img {
    width: 300px;
    height: auto;
    margin: 40px auto 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .tenx-multi__title { font-size: 52px; line-height: 1.1; }
}
@media (max-width: 900px) {
  .tenx-multi__body { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .tenx-multi__eyebrow { font-size: 26px; }
  .tenx-multi__title { font-size: 36px; line-height: 1.12; letter-spacing: -1px; }
  .tenx-multi__boxes { grid-template-columns: 1fr; }
  .tenx-multi__box-title { font-size: 20px; line-height: 1.4; }
  .tenx-multi__right-title { font-size: 30px; }
}

/* ==========================================================================
   Sharp Insights section (tinted band; right dashboard bleeds to the edge)
   ========================================================================== */
.tenx-insights { background: #F2F6FF; }
.tenx-insights__eyebrow { /* reserved; heading/sub below */ }
.tenx-insights__title {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  text-align: center;
  background: linear-gradient(90deg, #141414 30%, #8f8f8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-insights__sub {
  margin: 18px auto 0;
  max-width: 820px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #535353;
  text-align: center;
}

/* Band now shares the shell's own max-width/gutters (markup: class="tenx-insights__band shell")
   instead of a hand-rolled bleed calc. Boxes form one row, image sits below. */
.tenx-insights__band {
  margin-top: 48px;
}

/* Three boxes in a row. */
.tenx-insights__col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.tenx-insights__box {
  padding: 26px 30px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #EDEFF5;
  box-shadow: 0 14px 34px rgba(20, 30, 60, 0.07);
}
.tenx-insights__box--blue {
  background-image: url('https://sr-website-01.shiprocket.in/sr-website/third-box-bg-lZ9BId.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  color: #ffffff;
}

/* Header row: pill + question on one line. */
.tenx-insights__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}
.tenx-insights__tag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #E7ECFB;
  color: #4E6EF2;
}
.tenx-insights__box--blue .tenx-insights__tag {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.tenx-insights__q {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #111111;
}
.tenx-insights__box--blue .tenx-insights__q { color: #ffffff; }

/* Row-major 3-column item grid: items read left-to-right in natural order
   (CSS `columns` filled top-to-bottom, which scrambled scanning). */
.tenx-insights__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tenx-insights__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
}
.tenx-insights__list li::before {
  content: "\2022"; /* • */
  flex: 0 0 auto;
  color: currentColor;
}
.tenx-insights__box--blue .tenx-insights__list li { color: #ffffff; }

/* Right: dashboard image, flush to the right edge, rounded on the left only */
.tenx-insights__media {
  margin-top: 40px;
}
.tenx-insights__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Bottom two-line statement */
.tenx-insights__foot {
  margin: 56px auto 0;
  text-align: center;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #030303;
}
.tenx-insights__foot span {
  background: linear-gradient(92.73deg, #8DAEFA 39.89%, #58B4E2 67.54%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Responsive */
@media (max-width: 1024px) {
  .tenx-insights__title { font-size: 52px; line-height: 1.08; }
}
@media (max-width: 900px) {
  .tenx-insights__col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tenx-insights__title { font-size: 34px; letter-spacing: -1px; }
  .tenx-insights__sub { font-size: 17px; line-height: 1.45; }
  .tenx-insights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenx-insights__foot { font-size: 24px; }
}
@media (max-width: 460px) {
  .tenx-insights__box { flex-direction: column; gap: 16px; }
  .tenx-insights__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Modules section — heading + infinite blue marquee
   ========================================================================== */
  .tenx-modules{
    padding-top: 0px !important;
  }
.tenx-modules__title {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  text-align: center;
  background: linear-gradient(90deg, #141414 30%, #8f8f8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tenx-modules__sub {
  margin: 16px auto 0;
  max-width: 820px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #535353;
  text-align: center;
}
.tenx-modules__sub strong { color: #111111; font-weight: 700; }

/* Infinite marquee ------------------------------------------------------- */
.tenx-marquee {
  overflow: hidden;
  margin-top: 48px;
  padding: 26px 0;
  background-image: url('https://sr-website-01.shiprocket.in/sr-website/blueslider-bg-13FnwQ.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tenx-marquee__track {
  display: flex;
  width: max-content;
  animation: tenx-marquee 32s linear infinite;
}
.tenx-marquee:hover .tenx-marquee__track { animation-play-state: paused; }
.tenx-marquee__group { display: flex; align-items: center; }
.tenx-marquee__cell {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding-left: 20px;
  white-space: nowrap;
}
.tenx-marquee__label {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #ffffff;
}
.tenx-marquee__star { flex: 0 0 auto; width: 32px; height: 32px; }

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

@media (max-width: 1024px) {
  .tenx-modules__title { font-size: 52px; line-height: 1.08; }
}
@media (max-width: 640px) {
  .tenx-modules__title { font-size: 32px; letter-spacing: -1px; }
  .tenx-modules__sub { font-size: 17px; line-height: 1.45; }
  .tenx-marquee { padding: 18px 0; }
  .tenx-marquee__label { font-size: 20px; }
  .tenx-marquee__cell { gap: 26px; padding-left: 26px; }
  .tenx-marquee__star { width: 18px; height: 18px; }
}

/* ==========================================================================
   Stats section (lavender panel: hero image on top, count-up stats below)
   ========================================================================== */
  .tenx-stats{
    padding-top: 0px !important;
  }
.tenx-stats__panel {
  background: #F2F6FF;
  border-radius: 32px;
  padding: 40px;
}
.tenx-stats__media img {
  display: block;
  width: 1000%;
  height: auto;
  border-radius: 20px;
  margin: auto;
}
.tenx-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 28px;
}
.tenx-stats__card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
}
.tenx-stats__num {
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -1.5px;
  background:#707070;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums; /* stops width jitter while counting */
}
.tenx-stats__label {
  margin-top: 14px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #706A61;
}

@media (max-width: 860px) {
  .tenx-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tenx-stats__panel { padding: 20px; border-radius: 24px; }
  .tenx-stats__grid { grid-template-columns: 1fr; }
  .tenx-stats__num { font-size: 34px; }
	.tenx-stats__card {
    padding: 20px;
}
}

/* ==========================================================================
   CTA section (gradient panel: heading, sub, two buttons)
   ========================================================================== */
.tenx-cta{
  padding-top: 0px !important;
}
.tenx-cta__panel {
  background-image: url('https://sr-website-01.shiprocket.in/sr-website/CTAbg-9Rg72E.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 32px;
  padding: 84px 40px;
  text-align: center;
}
.tenx-cta__title {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  color: #111111;
  text-align: center;
}
.tenx-cta__sub {
  margin: 22px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #333333;
  text-align: center;
}
.tenx-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.tenx-cta__actions .btn-primary,
.tenx-cta__actions .btn-outline {
  padding: 14px 30px;
  font-size: 15px;
}

@media (max-width: 1024px) {
  .tenx-cta__title { font-size: 52px; line-height: 1.1; }
}
@media (max-width: 640px) {
  .tenx-cta__panel { padding: 56px 24px; border-radius: 24px; }
  .tenx-cta__title { font-size: 34px; letter-spacing: -1px; }
  .tenx-cta__sub { font-size: 16px; }
}

/* ==========================================================================
   Roles section (left text list + right image slider)
   ========================================================================== */
.tenx-roles__eyebrow {
  margin: 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #535353;
}
.tenx-roles__title {
  margin: 8px 0 0;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 76px;
  line-height: 79.8px;
  letter-spacing: -3.04px;
  background: linear-gradient(278.27deg, #737373 19.91%, #111111 66.51%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tenx-roles__body {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 40px;
  /* Full-bleed band: left list aligns to the shell, the slider runs to the
     right viewport edge (same math as .tenx-insights__band). */
  padding-left: max(32px, calc((100% - 1380px) / 2 + 32px));
  padding-right: 0;
}

/* Left: role items */
.tenx-roles__item + .tenx-roles__item { margin-top: 30px; }
.tenx-roles__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #E7ECFB;
  color: #4E6EF2;
}
.tenx-roles__item-title {
  margin: 14px 0 6px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #111111;
}
.tenx-roles__item-text {
  margin: 0;
  max-width: 360px;
  font-family: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #6B7280;
}

/* Right: slider — no padding/margin; each slide image carries its own panel
   background. Two slides show at once: the active one full size, the next one
   scaled down; the incoming slide grows to full size as it becomes active. */
.tenx-roles__stage {
  padding: 0;
}
.tenx-roles__viewport {
  overflow: hidden;
}
.tenx-roles__track {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tenx-roles__slide {
  flex: 1 0 35%;
  transform: scale(0.86);
  transform-origin: center;
  border-radius: 28px;
  /* Inset the (transparent) image so the active slide's gradient frames it. */
  padding: 34px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The blue-purple gradient rides the active slide, so it moves with whichever
   slide is in front (images are transparent card art layered on top). */
.tenx-roles__slide.is-active {
  transform: scale(1);
  background: radial-gradient(65.29% 65.29% at 85% 16.82%, #F2F6FF 0%, #BCCDF8 100%);
}
.tenx-roles__slide img { display: block; width: 100%; height: auto;border: 1px solid #d3d3d3;border-radius: 30px;}

.tenx-roles__dots {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.tenx-roles__dot {
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #E2E6F0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.tenx-roles__dot.is-active { background: #5B7CE0; }

@media (max-width: 900px) {
  .tenx-roles__body { grid-template-columns: 1fr; gap: 36px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .tenx-roles__eyebrow { font-size: 22px; }
  .tenx-roles__title { font-size: 36px; line-height: 1.12; letter-spacing: -1px; }
  /* One dominant slide with a small peek on phones. */
  .tenx-roles__slide { flex: 0 0 86%; transform: scale(0.92); padding: 20px; }
  .tenx-roles__track { gap: 16px; }
}
@media (max-width: 640px) {
  .tenx-home > section{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .tenx-home__bg{
        background-size: cover;
  }
  .tenx-home__banner{
    padding-bottom: 80px !important;
  }
  .tenx-home__shot{
        margin-top: 40px;
  }
  .tenx-sophie__right img{
      width: 95%;
      margin-bottom: -35px;
  }
  /* Full-width rounded video on mobile; lift the desktop height cap so the
     full-width portrait frame is not cropped by the container. */
  .tenx-sophie__right{
      max-height: none;
  }
  .tenx-sophie__right video{
      width: 100%;
      max-height: none;
      margin: 0;
      border-radius: 20px;
  }
  .tenx-insights__head{
        align-items: flex-start;
        flex-direction: column;
  }

}

/* ── One-page menu navigation ─────────────────────────────────────────────
   Smooth-scroll anchor navigation for the primary menu. scroll-margin-top
   keeps section headings clear of the sticky 68px header. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.tenx-home__banner,
.tenx-flow,
.tenx-sophie,
.tenx-insights,
.tenx-modules {
  scroll-margin-top: 80px;
}