/*
 * Tech Squadrons — site-wide design layer (mu-plugins/ts-site).
 * One set of tokens; every button, card and heading draws on it so the site
 * reads as one system. Scoped to body.ts-x. Content is untouched: this only
 * restyles what Elementor already renders, plus the ts-* blocks.
 */

:root {
  --tsx-ink: #0B1530;
  --tsx-ink-2: #16234A;
  --tsx-text: #3A4560;
  --tsx-muted: #5D6884;
  --tsx-line: #E3E9F3;
  --tsx-soft: #F5F8FD;
  --tsx-blue: #0F9FFA;
  --tsx-blue-d: #0A7FD6;
  --tsx-cyan: #22D3EE;
  --tsx-violet: #6D5BFF;
  --tsx-grad: linear-gradient(120deg, #0F9FFA 0%, #22D3EE 100%);
  --tsx-grad-text: linear-gradient(100deg, #0F9FFA 10%, #22D3EE 60%, #6D5BFF 100%);
  --tsx-grad-dark: linear-gradient(135deg, #070E24 0%, #0B1A45 55%, #0E3A8A 100%);
  --tsx-r: 18px;
  --tsx-r-lg: 26px;
  --tsx-shadow: 0 1px 2px rgba(11, 21, 48, .05), 0 14px 34px -18px rgba(11, 21, 48, .28);
  --tsx-shadow-hover: 0 24px 48px -22px rgba(15, 159, 250, .45);
  --tsx-glow: 0 10px 28px -12px rgba(15, 159, 250, .7);
  --tsx-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
  --tsx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Typography ------------------------------------------------- */
.ts-x h1.elementor-heading-title,
.ts-x h2.elementor-heading-title,
.ts-x .elementskit-section-title,
.ts-x .ts-hl h2,
.ts-x .ts-launch h2,
.ts-x .ts-sec-title {
  font-family: var(--tsx-display) !important;
  letter-spacing: -.025em !important;
  color: var(--tsx-ink);
}
.ts-x .elementskit-section-title span,
.ts-x .ts-grad {
  background: var(--tsx-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ---------- Header: solid frosted glass so the logo reads clearly ------ */
.ts-x .elementor-element-f01190a {
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid rgba(15, 159, 250, .16) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -18px rgba(11, 21, 48, .45) !important;
  transition: box-shadow .25s var(--tsx-ease), background .25s;
}
.ts-x.ts-scrolled .elementor-element-f01190a {
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 14px 36px -16px rgba(11, 21, 48, .5) !important;
}
.ts-x .ha-site-logo img,
.ts-x .elementor-widget-ha-site-logo img {
  image-rendering: -webkit-optimize-contrast;
  height: auto;
}
.ts-x .elementor-nav-menu a,
.ts-x .elementskit-navbar-nav > li > a {
  font-weight: 600 !important;
  letter-spacing: .02em;
  transition: color .2s !important;
}
.ts-x .elementskit-navbar-nav > li > a:hover,
.ts-x .elementskit-navbar-nav > li.current-menu-item > a {
  color: var(--tsx-blue) !important;
}

/* ---------- Buttons: one primary style everywhere ----------------------- */
.ts-x .elementor-button,
.ts-x .ekit-wid-con .elementskit-btn:not(.ts-keep),
.ts-x .ha-creative-btn,
.ts-x .ts-hl .cta,
.ts-x .wpcf7-submit,
.ts-x input[type="submit"].tnp-submit,
.ts-x .tnp-submit,
.ts-x .ts-btn {
  background: var(--tsx-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: var(--tsx-glow) !important;
  transition: transform .2s var(--tsx-ease), box-shadow .2s var(--tsx-ease), filter .2s !important;
  text-shadow: none !important;
}
.ts-x .elementor-button:hover,
.ts-x .ekit-wid-con .elementskit-btn:not(.ts-keep):hover,
.ts-x .ha-creative-btn:hover,
.ts-x .ts-hl .cta:hover,
.ts-x .wpcf7-submit:hover,
.ts-x .tnp-submit:hover,
.ts-x .ts-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(15, 159, 250, .75) !important;
  filter: saturate(1.08) brightness(1.03);
  color: #fff !important;
}
/* The "Fill the Form" button: its widget sets a white background with higher
   specificity than the shared rule, so it is named here explicitly. */
body.ts-x .elementor .elementor-element.elementor-element-27ff218 .ha-creative-btn {
  background: var(--tsx-grad) !important;
  background-color: var(--tsx-blue) !important;
  color: #fff !important;
  border: 0 !important;
}
/* Happy Addons' animated button draws its own layers; keep only ours. */
.ts-x .ha-creative-btn::before,
.ts-x .ha-creative-btn::after { display: none !important; }
.ts-x .ha-creative-btn .ha-creative-btn-text,
.ts-x .ha-creative-btn span {
  color: #fff !important;
  background: transparent !important;
  -webkit-text-fill-color: #fff;
  opacity: 1 !important;
  transform: none !important;
}
.ts-x .ha-creative-btn { padding: 15px 34px !important; display: inline-block; }

/* Small "Learn more" buttons inside service cards: a quiet ghost button. */
.ts-x .elementskit-infobox .elementskit-btn,
.ts-x .elementskit-infobox .elementor-button {
  background: transparent !important;
  color: var(--tsx-blue) !important;
  box-shadow: inset 0 0 0 1.5px rgba(15, 159, 250, .55) !important;
}
.ts-x .elementskit-infobox:hover .elementskit-btn,
.ts-x .elementskit-infobox:hover .elementor-button {
  background: var(--tsx-grad) !important;
  color: #fff !important;
  box-shadow: var(--tsx-glow) !important;
}

/* ---------- Cards: one look for every card on the site ------------------ */
.ts-x .elementskit-infobox {
  border-radius: var(--tsx-r) !important;
  border: 1px solid var(--tsx-line) !important;
  background: linear-gradient(180deg, #fff 0%, var(--tsx-soft) 100%) !important;
  box-shadow: var(--tsx-shadow) !important;
  transition: transform .3s var(--tsx-ease), box-shadow .3s var(--tsx-ease), border-color .3s !important;
}
.ts-x .elementskit-infobox:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 159, 250, .45) !important;
  box-shadow: var(--tsx-shadow-hover) !important;
}
.ts-x .elementskit-infobox .elementskit-info-box-title {
  font-family: var(--tsx-display);
  letter-spacing: -.01em;
  color: var(--tsx-ink) !important;
}

/* "What we build": the "Our focus" tag sits in the corner, so the AI card's
   icon and title line up with the other four cards. */
.ts-x .ts-hl .c { position: relative; border-radius: var(--tsx-r) !important; transition: transform .3s var(--tsx-ease), box-shadow .3s var(--tsx-ease), border-color .3s; }
.ts-x .ts-hl .c:hover { transform: translateY(-5px); box-shadow: var(--tsx-shadow-hover); border-color: rgba(15, 159, 250, .4); }
.ts-x .ts-hl .c.ai .tag {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0 !important;
}

/* ---------- "Our Objective": stacked, heading over the cards ------------- */
.ts-x .elementor-element-3f7fd9e > .elementor-container { flex-direction: column !important; }
.ts-x .elementor-element-3f7fd9e > .elementor-container > .elementor-column { width: 100% !important; max-width: 100% !important; }
.ts-x .elementor-element-3f7fd9e .elementor-element-04217f2 { margin-bottom: 8px; }
.ts-x .elementor-element-3f7fd9e .elementor-element-04217f2 .elementor-heading-title br { display: none; }

/* ---------- "Turn your ideas into success": centred, with a soft panel ---- */
.ts-x .elementor-element-1e8d93e,
.ts-x .elementor-element-abcd32f,
.ts-x .elementor-element-c07f5dd { text-align: center !important; }
.ts-x .elementor-element-1e8d93e { margin-top: 56px !important; }
.ts-x .elementor-element-1e8d93e .elementor-heading-title {
  font-family: var(--tsx-display) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  letter-spacing: -.025em !important;
}
.ts-x .elementor-element-abcd32f p { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.ts-x .elementor-element-abcd32f p:first-child { font-weight: 600; color: var(--tsx-ink); font-size: 17px; }
.ts-x .ts-ideas-lead { color: var(--tsx-muted); font-size: 16px; line-height: 1.65; margin-top: 6px !important; }
.ts-x .ts-ideas-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 6px !important; padding: 0 !important; max-width: 1040px; }
.ts-x .ts-ideas-steps li {
  margin: 0 !important; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tsx-ink);
  background: #fff; border: 1px solid var(--tsx-line); box-shadow: var(--tsx-shadow);
}
.ts-x .ts-ideas-steps li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--tsx-grad); }
.ts-x .elementor-element-c07f5dd .elementor-button-wrapper,
.ts-x .elementor-element-c07f5dd .elementor-widget-container { display: flex; justify-content: center; }
.ts-x .elementor-element-c07f5dd .elementor-button { padding: 15px 34px !important; }

/* ---------- "Our Work": a dark, futuristic stage for the showcase -------- */
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) {
  background: var(--tsx-grad-dark) !important;
  position: relative;
  overflow: hidden;
}
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(109, 91, 255, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px;
  pointer-events: none;
}
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) > .elementor-container { position: relative; z-index: 1; }
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .elementskit-section-title,
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .elementskit-section-title span { color: #fff !important; -webkit-text-fill-color: #fff; }
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .ekit-heading--subtitle,
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .ekit-heading__description,
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .ekit-heading__description p { color: #B7C4E0 !important; }
.ts-x :is(.elementor-element-1ef39c2, .elementor-element-85c3260) .elementor-shape { display: none !important; }

/* ---------- "Ready to start your project?": a gradient banner ----------- */
/* The section's own white card would frame the banner; drop it. */
.ts-x .elementor-element-170a8ca > .elementor-container {
  box-shadow: none !important;
  background: transparent !important;
}
.ts-x .elementor-element-170a8ca { background: transparent !important; }
/* The older polish CSS hangs a glow off the container's corner; the banner has its own. */
.ts-x .elementor-element-170a8ca > .elementor-container::before { display: none !important; }
.ts-x .elementor-element-170a8ca > .elementor-background-overlay,
.ts-x .elementor-element-170a8ca > .elementor-shape { display: none !important; }
.ts-x .elementor-element-170a8ca .elementor-widget-wrap {
  background: var(--tsx-grad-dark) !important;
  border-radius: var(--tsx-r-lg) !important;
  padding: 56px 32px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .6) !important;
}
.ts-x .elementor-element-170a8ca .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(34, 211, 238, .35), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px;
  pointer-events: none;
}
.ts-x .elementor-element-170a8ca .elementor-widget-wrap > * { position: relative; z-index: 1; }
.ts-x .elementor-element-c6f72d7 .elementor-heading-title,
.ts-x .elementor-element-c6f72d7 .elementor-heading-title * {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: 1 !important;
}
.ts-x .elementor-element-c6f72d7 .elementor-heading-title {
  font-family: var(--tsx-display) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.3 !important;
  max-width: 820px;
  margin: 0 auto 8px !important;
}

/* ---------- Articles: the card layout lives in the page's own CSS ---------- */
.ts-x .elementor-element-fddd165 .post-header-home {
  font-family: var(--tsx-display);
  letter-spacing: -.015em;
}

/* ---------- Footer ------------------------------------------------------ */
.ts-x .ekit-template-content-footer a { transition: color .2s; }
.ts-x .ekit-template-content-footer a:hover { color: var(--tsx-blue) !important; }

/* ---------- Newsletter (Newsletter plugin forms): label above field (page content only, not the footer form) */
.ts-x .ha-post-content .tnp-subscription,
.ts-x .ha-post-content .tnp-profile {
  max-width: 560px;
  margin: 0 auto;
}
.ts-x .ha-post-content .tnp-subscription form,
.ts-x .ha-post-content .tnp-profile form { display: block; }
.ts-x .ha-post-content .tnp-field {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 16px !important;
}
.ts-x .ha-post-content .tnp-field label {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 6px !important;
  font-weight: 600;
  color: var(--tsx-ink);
  font-size: 15px;
}
.ts-x .ha-post-content .tnp-field input[type="text"],
.ts-x .ha-post-content .tnp-field input[type="email"],
.ts-x .ha-post-content .tnp-field select,
.ts-x .ha-post-content .tnp-field textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 16px !important;
  border: 1px solid var(--tsx-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 16px !important;
  color: var(--tsx-ink);
  transition: border-color .2s, box-shadow .2s;
}
.ts-x .ha-post-content .tnp-field input:focus,
.ts-x .ha-post-content .tnp-field select:focus {
  border-color: var(--tsx-blue) !important;
  box-shadow: 0 0 0 4px rgba(15, 159, 250, .15) !important;
  outline: 0;
}
.ts-x .ha-post-content .tnp-field-button { text-align: left; }
.ts-x .ha-post-content .tnp-submit { width: 100%; padding: 14px 24px !important; font-size: 16px !important; }

/* =========================================================================
 * ts-* blocks: section heading, solutions, showcase, testimonials
 * ======================================================================= */
.ts-sec-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 159, 250, .1);
  color: var(--tsx-blue-d);
  font: 700 12px/1 var(--tsx-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ts-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tsx-grad); box-shadow: 0 0 10px var(--tsx-cyan); }
.ts-sec-title { font: 700 clamp(28px, 3.4vw, 44px)/1.15 var(--tsx-display); margin: 16px 0 12px; color: var(--tsx-ink); }
.ts-sec-lead { font-size: 17px; line-height: 1.6; color: var(--tsx-muted); margin: 0; }
/* The testimonials section stays out of the page until a quote is published. */
.ts-x .elementor-element-tstst01:not(:has(.ts-quotes, .ts-empty-note)) { display: none !important; }
.ts-empty-note { text-align: center; color: var(--tsx-muted); font-size: 14px; padding: 20px; border: 1px dashed var(--tsx-line); border-radius: 14px; }

/* Solutions */
.ts-solutions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ts-sol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--tsx-r);
  border: 1px solid var(--tsx-line);
  background: linear-gradient(180deg, #fff 0%, var(--tsx-soft) 100%);
  box-shadow: var(--tsx-shadow);
  color: inherit;
  text-decoration: none !important;
  transition: transform .3s var(--tsx-ease), box-shadow .3s var(--tsx-ease), border-color .3s;
  overflow: hidden;
}
.ts-sol::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tsx-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--tsx-ease);
}
.ts-sol:hover { transform: translateY(-5px); border-color: rgba(15, 159, 250, .4); box-shadow: var(--tsx-shadow-hover); }
.ts-sol:hover::after { transform: scaleX(1); }
.ts-sol__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 159, 250, .14), rgba(34, 211, 238, .14));
  color: var(--tsx-blue-d);
}
.ts-sol__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ts-sol__title { font: 700 17px/1.3 var(--tsx-display) !important; letter-spacing: -.01em; color: var(--tsx-ink) !important; margin: 4px 0 0 !important; }
.ts-sol__text { font-size: 14px; line-height: 1.55; color: var(--tsx-muted); margin: 0 !important; flex: 1; }
.ts-sol__more { font-size: 13.5px; font-weight: 700; color: var(--tsx-blue-d); }

/* Showcase */
.ts-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; }
.ts-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #DCE6F7;
  padding: 9px 18px;
  border-radius: 999px;
  font: 600 14px/1 var(--tsx-display);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.ts-chip:hover { border-color: rgba(34, 211, 238, .6); color: #fff; }
.ts-chip.is-active { background: var(--tsx-grad); border-color: transparent; color: #fff; box-shadow: var(--tsx-glow); }

.ts-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ts-work {
  display: flex;
  flex-direction: column;
  border-radius: var(--tsx-r-lg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform .35s var(--tsx-ease), border-color .35s, box-shadow .35s var(--tsx-ease);
}
.ts-work:hover { transform: translateY(-6px); border-color: rgba(34, 211, 238, .55); box-shadow: 0 30px 60px -30px rgba(34, 211, 238, .5); }
.ts-work[hidden] { display: none; }
.ts-work__shot { display: block; position: relative; margin: 14px 14px 0; border-radius: 14px; overflow: hidden; background: #0E1838; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
.ts-work__chrome { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #141F44; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ts-work__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.ts-work__chrome i:nth-child(2) { background: #FEBC2E; }
.ts-work__chrome i:nth-child(3) { background: #28C840; }
.ts-work__chrome em { margin-left: 10px; font: 500 11px/1 system-ui, sans-serif; font-style: normal; color: #8FA0C4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-work__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s var(--tsx-ease); }
.ts-work:hover .ts-work__shot img { transform: scale(1.04); }
.ts-work__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.ts-work__cat { align-self: flex-start; font: 700 11px/1 var(--tsx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tsx-cyan); }
.ts-work__title { margin: 0 !important; font: 700 21px/1.25 var(--tsx-display) !important; letter-spacing: -.015em; }
.ts-work__title a { color: #fff !important; text-decoration: none !important; }
.ts-work__summary { margin: 0 !important; font-size: 14.5px; line-height: 1.6; color: #B5C2DE; flex: 1; }
.ts-work__links { display: flex; gap: 18px; margin-top: 6px; }
.ts-work__links a { font-size: 14px; font-weight: 700; color: #7FD6FF !important; text-decoration: none !important; }
.ts-work__links a:hover { color: #fff !important; }

/* Showcase on a light page (portfolio page background) */
.ts-light .ts-work { background: #fff; border-color: var(--tsx-line); box-shadow: var(--tsx-shadow); }
.ts-light .ts-work__title a { color: var(--tsx-ink) !important; }
.ts-light .ts-work__summary { color: var(--tsx-muted); }
.ts-light .ts-work__cat { color: var(--tsx-blue-d); }
.ts-light .ts-work__links a { color: var(--tsx-blue-d) !important; }
.ts-light .ts-chip { border-color: var(--tsx-line); background: #fff; color: var(--tsx-ink); }

/* Testimonials */
.ts-quotes { position: relative; }
.ts-quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 18px;
  scrollbar-width: none;
}
.ts-quotes__track::-webkit-scrollbar { display: none; }
.ts-quote {
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px;
  border-radius: var(--tsx-r-lg);
  background: #fff;
  border: 1px solid var(--tsx-line);
  box-shadow: var(--tsx-shadow);
  position: relative;
}
.ts-quote::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--tsx-r-lg) var(--tsx-r-lg) 0 0; background: var(--tsx-grad); }
.ts-quote__mark { font: 700 64px/0.6 Georgia, serif; background: var(--tsx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; height: 28px; }
.ts-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.65; color: var(--tsx-text); flex: 1; }
.ts-quote blockquote p { margin: 0 0 10px; }
.ts-quote figcaption { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--tsx-line); }
.ts-quote__logo { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--tsx-soft); border: 1px solid var(--tsx-line); display: grid; place-items: center; }
.ts-quote__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.ts-quote__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-quote__who strong { font: 700 15px/1.3 var(--tsx-display); color: var(--tsx-ink); }
.ts-quote__who span { font-size: 13.5px; color: var(--tsx-muted); }
.ts-quote__who a { font-size: 13px; font-weight: 600; color: var(--tsx-blue-d); text-decoration: none; }
.ts-quotes__nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.ts-round {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--tsx-line);
  background: #fff;
  color: var(--tsx-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--tsx-shadow);
  transition: background .2s, color .2s, transform .2s;
}
.ts-round:hover { background: var(--tsx-grad); color: #fff; border-color: transparent; transform: translateY(-2px); }


/* ---------- "Our Objective": four cards in a row under the heading -------- */
.ts-x .ts-obj { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ts-x .ts-obj-card { border-radius: var(--tsx-r) !important; transition: transform .3s var(--tsx-ease), box-shadow .3s var(--tsx-ease), border-color .3s; }
.ts-x .ts-obj-card:hover { transform: translateY(-5px); box-shadow: var(--tsx-shadow-hover); border-color: rgba(15, 159, 250, .4) !important; }
@media (max-width: 1024px) { .ts-x .ts-obj { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .ts-x .ts-obj { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Shared bits: light eyebrow, device frame, extra buttons ------- */
.ts-eyebrow--light { background: rgba(255, 255, 255, .1); color: #CFEFFF; border: 1px solid rgba(255, 255, 255, .18); }
.ts-device { display: block; border-radius: 16px; overflow: hidden; background: #0E1838; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(34, 211, 238, .12), 0 0 70px -10px rgba(15, 159, 250, .45); }
.ts-device img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-size: 15.5px; text-decoration: none !important; }
.ts-x .ts-btn.ts-btn--light { background: #fff !important; color: var(--tsx-ink) !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5) !important; }
.ts-x .ts-btn.ts-btn--light:hover { color: var(--tsx-ink) !important; }
.ts-btn-ghost { display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: #fff !important;
  text-decoration: none !important; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); transition: background .2s, border-color .2s; }
.ts-btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff !important; }
.ts-link-light { color: #fff !important; font-weight: 700; text-decoration: none !important; opacity: .9; }
.ts-link-light:hover { opacity: 1; }
.ts-round--dark { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); box-shadow: none; }

/* ---------- Hero carousel ------------------------------------------------- */
.ts-x .elementor-element-60ae320,
.ts-x .elementor-element-60ae320 > .elementor-container,
.ts-x .elementor-element-60ae320 .elementor-column,
.ts-x .elementor-element-60ae320 .elementor-widget-wrap { padding: 0 !important; max-width: none !important; }
.ts-hero { position: relative; overflow: hidden; color: #fff; background: var(--tsx-grad-dark); isolation: isolate; }
.ts-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 380px at 85% 10%, rgba(34, 211, 238, .25), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(109, 91, 255, .28), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 46px 46px; }
.ts-hero__slides { display: grid; }
.ts-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s var(--tsx-ease), visibility .7s; }
.ts-hero__slide.is-active { opacity: 1; visibility: visible; }
.ts-hero__slide--art { background: linear-gradient(90deg, rgba(7, 14, 36, .92) 0%, rgba(7, 14, 36, .55) 55%, rgba(7, 14, 36, .1) 100%), var(--ts-art) center / cover no-repeat; }
.ts-hero__inner { max-width: 1240px; margin: 0 auto; padding: 150px 24px 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center; min-height: 640px; box-sizing: border-box; }
.ts-hero__slide--art .ts-hero__inner { grid-template-columns: minmax(0, 1fr); }
.ts-hero__copy { max-width: 620px; }
.ts-x .ts-hero__title { font: 700 clamp(36px, 5vw, 62px)/1.06 var(--tsx-display) !important; letter-spacing: -.03em !important; color: #fff !important; margin: 20px 0 18px !important; }
.ts-hero__title span { display: block; background: var(--tsx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-x .ts-hero__slide--art .ts-hero__title { text-transform: uppercase; font-size: clamp(40px, 6vw, 76px) !important; }
.ts-hero__text { font-size: 18px; line-height: 1.6; color: #C5D2EC; margin: 0 0 30px; max-width: 540px; }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ts-hero__visual { perspective: 1400px; }
.ts-hero__visual .ts-device { transform: rotateY(-9deg) rotateX(4deg); }
.ts-hero__slide.is-active .ts-hero__visual .ts-device { animation: ts-float 7s ease-in-out infinite; }
@keyframes ts-float {
  0%, 100% { transform: rotateY(-9deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-7deg) rotateX(3deg) translateY(-10px); }
}
.ts-hero__controls { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 2; }
.ts-hero__dots { display: flex; gap: 8px; }
.ts-hero__dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .35s var(--tsx-ease), background .35s; }
.ts-hero__dot.is-active { width: 30px; background: var(--tsx-grad); }

/* ---------- E-commerce banner --------------------------------------------- */
.ts-cta-ec { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: 48px 52px; border-radius: var(--tsx-r-lg); color: #fff; isolation: isolate;
  background: linear-gradient(120deg, #0A63D8 0%, #0F9FFA 45%, #6D5BFF 100%); box-shadow: 0 40px 80px -40px rgba(15, 99, 216, .7); }
.ts-cta-ec::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(500px 260px at 90% 0%, rgba(255, 255, 255, .25), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px; }
.ts-x .ts-cta-ec__title { font: 700 clamp(26px, 3vw, 38px)/1.15 var(--tsx-display) !important; letter-spacing: -.025em; color: #fff !important; margin: 16px 0 12px !important; }
.ts-cta-ec__title span { display: block; color: #DFF7FF; }
.ts-cta-ec__lead { color: #EAF4FF; font-size: 16.5px; line-height: 1.6; margin: 0 0 18px; }
.ts-cta-ec__points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-cta-ec__points li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 13.5px; font-weight: 600; }
.ts-cta-ec__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ts-cta-ec__visual .ts-device { transform: rotate(2deg); }

@media (max-width: 1024px) {
  .ts-hero__inner { grid-template-columns: minmax(0, 1fr); padding: 130px 24px 110px; gap: 36px; min-height: 0; }
  .ts-hero__visual { max-width: 640px; }
  .ts-cta-ec { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
}
@media (max-width: 767px) {
  .ts-hero__inner { padding: 112px 18px 96px; }
  .ts-hero__text { font-size: 16px; }
  .ts-hero__visual .ts-device,
  .ts-hero__slide.is-active .ts-hero__visual .ts-device { transform: none; animation: none; }
  .ts-hero__controls { bottom: 24px; }
  .ts-btn, .ts-btn-ghost { padding: 12px 22px; font-size: 15px; }
  .ts-cta-ec { padding: 32px 20px; border-radius: 20px; }
}

/* ---------- Scroll reveal (added by ts-site.js; off for reduced motion) --- */
.ts-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--tsx-ease), transform .6s var(--tsx-ease); }
.ts-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ts-reveal { opacity: 1; transform: none; transition: none; }
  .ts-x *, .ts-x *::before, .ts-x *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .ts-solutions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ts-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ts-quotes__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .ts-sec-head { margin-bottom: 28px; }
  .ts-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ts-sol { padding: 18px 16px; }
  .ts-sol__text { font-size: 13.5px; }
  .ts-work-grid { grid-template-columns: minmax(0, 1fr); }
  .ts-quotes__track { grid-auto-columns: 86%; gap: 16px; }
  .ts-x .elementor-element-170a8ca .elementor-widget-wrap { padding: 40px 20px !important; border-radius: 20px !important; }
  .ts-x .elementor-element-f01190a { border-radius: 14px !important; }
}
@media (max-width: 420px) {
  .ts-solutions { grid-template-columns: minmax(0, 1fr); }
}