/**
 * TirelessCrew Elements — widget styles.
 * Scoped to .tce-* classes so nothing leaks into the rest of the site.
 */

:root{
  --tce-primary:#2563EB;
  --tce-primary-hover:#1D4ED8;
  --tce-navy:#0F2E8A;
  --tce-deep:#081A4D;
  --tce-accent:#1E90FF;
  --tce-border:#E2E8F0;
  --tce-ink:#000000;
  --tce-muted:#3F3F46;
}

/* ── Shared site chrome ─────────────────────────────────────────────
   These native Elementor widgets are used by the Theme Builder header and
   footer templates. They intentionally stay independent of page body styles. */
.tce-site-header{background:#fff;border-bottom:1px solid var(--tce-border);position:relative;z-index:20}
.tce-site-header__inner,.tce-site-footer__inner{width:min(1180px,calc(100% - 48px));margin:0 auto;display:flex;align-items:center}
.tce-site-header__inner{min-height:76px;gap:28px;justify-content:space-between}
.tce-site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--tce-ink);font-size:20px;font-weight:800;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.tce-site-brand img{display:block;width:34px;height:34px;object-fit:contain}
.tce-site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.tce-site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:#3F3F46;font-size:14px;font-weight:650;text-decoration:none;transition:background .18s,color .18s}
.tce-site-nav a:hover{background:#EFF6FF;color:var(--tce-primary)}
.tce-site-header__cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border-radius:9px;background:var(--tce-primary);color:#fff;font-size:14px;font-weight:750;text-decoration:none;box-shadow:0 8px 18px -8px rgba(37,99,235,.7);transition:background .18s,transform .18s}
.tce-site-header__cta:hover{background:var(--tce-primary-hover);color:#fff;transform:translateY(-1px)}
.tce-site-footer{background:var(--tce-deep);color:rgba(255,255,255,.76);margin:0;padding:56px 0 0}
.tce-site-footer__inner{align-items:flex-start;justify-content:space-between;gap:48px;padding-bottom:48px}
.tce-site-footer__brand{max-width:330px}.tce-site-brand--footer{color:#fff}.tce-site-footer__brand p{margin:14px 0 0;font-size:15px;line-height:1.6}
.tce-site-footer__links{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:8px 24px}
.tce-site-footer__links a{display:inline-flex;align-items:center;min-height:36px;color:rgba(255,255,255,.78);font-size:14px;text-decoration:none}.tce-site-footer__links a:hover{color:#fff;text-decoration:underline}
.tce-site-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:20px 24px;color:rgba(255,255,255,.54);font-size:13px;text-align:center}
@media(max-width:820px){.tce-site-header__inner{width:min(100% - 32px,1180px);min-height:72px;gap:14px;flex-wrap:wrap;padding:14px 0}.tce-site-nav{order:3;width:100%;justify-content:space-between;margin-left:0}.tce-site-nav a{padding:0 7px;font-size:13px}.tce-site-header__cta{padding:0 13px;font-size:13px}.tce-site-footer__inner{width:min(100% - 40px,1180px);display:block;padding-bottom:36px}.tce-site-footer__links{margin-top:30px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}.tce-site-footer__links a{min-height:44px}}

/* ── Mobile footer navigation ───────────────────────────────────────
   Footer links are visible controls, not just inline prose. Give them a
   reliable 44px tap target on phones without changing the desktop layout. */
@media (max-width:767px){
  .elementor-location-footer .elementor-nav-menu a.elementor-item{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

/* ── Widget wrappers must fill their Elementor container ──────────────
   Elementor containers are flex. Without an explicit width our widgets
   size to their content and sit left instead of spanning the viewport,
   which is what pushed the Use cases page off-centre. Every widget the
   plugin registers needs this. */
.elementor-widget-tce_hero,
.elementor-widget-tce_activity_panel,
.elementor-widget-tce_landing,
.elementor-widget-tce_usecases,
.elementor-widget-tce_howitworks,
.elementor-widget-tce_pricing,
.elementor-widget-tce_about,
.elementor-widget-tce_trust,
.elementor-widget-tce_job_examples,
.elementor-widget-tce_integrations,
.elementor-widget-tce_compare{ width:100%; max-width:100%; }

.elementor-widget-tce_hero > .elementor-widget-container,
.elementor-widget-tce_landing > .elementor-widget-container,
.elementor-widget-tce_usecases > .elementor-widget-container,
.elementor-widget-tce_howitworks > .elementor-widget-container,
.elementor-widget-tce_pricing > .elementor-widget-container,
.elementor-widget-tce_about > .elementor-widget-container,
.elementor-widget-tce_trust > .elementor-widget-container,
.elementor-widget-tce_job_examples > .elementor-widget-container,
.elementor-widget-tce_integrations > .elementor-widget-container,
.elementor-widget-tce_compare > .elementor-widget-container{ width:100%; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.tce-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  --tce-hero-fg:#FFFFFF;
  background:
    radial-gradient(1000px 520px at 50% -6%, color-mix(in srgb, var(--tce-gl-accent,#1E90FF) 50%, transparent), transparent 64%),
    radial-gradient(700px 420px at 88% 10%, color-mix(in srgb, var(--tce-primary) 42%, transparent), transparent 62%),
    linear-gradient(180deg, var(--tce-gl-top,#0F2E8A) 0%, var(--tce-gl-bottom,#1B4BC4) 100%);
}
/* WebGL canvas sits above the CSS gradient, below the content.
   `mix-blend-mode:screen` is a deliberate safety net: black output from the
   shader becomes invisible, so the CSS gradient below is always what you see
   at minimum, and any colour the shader produces adds glow on top. The hero
   can therefore never render as a black box, whatever WebGL does. */
.tce-hero .tce-hero-gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; display:block;
  mix-blend-mode:screen;
  opacity:.85;
}
.tce-hero--grid::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
}
.tce-hero__inner{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px;
}
.tce-hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  color:var(--tce-hero-fg);
  border-radius:999px; padding:8px 16px;
  font-size:13px; font-weight:500;
}
.tce-pulse{position:relative;display:inline-flex;width:8px;height:8px}
.tce-pulse::before,.tce-pulse::after{content:'';position:absolute;inset:0;border-radius:999px;background:var(--tce-accent)}
.tce-pulse::before{animation:tce-ping 1.8s cubic-bezier(0,0,.2,1) infinite;opacity:.75}
@keyframes tce-ping{75%,100%{transform:scale(2.4);opacity:0}}

/* Specificity note: Elementor's Global Kit emits `.elementor-kit-N h1{color:…}`
   and `.elementor-kit-N a{color:…}` (0-1-1). Every colour rule below is written
   with two classes (0-2-0) so it wins cleanly, without !important. */
.tce-hero .tce-hero__title{
  margin:0; color:var(--tce-hero-fg);
  font-size:clamp(38px, 6vw, 74px);
  line-height:1.05; font-weight:800; letter-spacing:-.035em;
  max-width:19ch;
}
.tce-hero .tce-hero__accent{
  background:linear-gradient(96deg,#fff 20%,#9EC9FF 62%,var(--tce-accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.tce-hero .tce-hero__sub{
  margin:0; max-width:62ch;
  color:color-mix(in srgb, var(--tce-hero-fg) 82%, transparent);
  font-size:clamp(16px,1.6vw,20px); line-height:1.62;
}
.tce-hero .tce-hero__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px}
.tce-hero .tce-hero__fine{margin:0;font-size:14px;color:color-mix(in srgb, var(--tce-hero-fg) 65%, transparent)}
.tce-hero .tce-hero__badge{color:var(--tce-hero-fg)}

@media (max-width:640px){
  .tce-hero__actions{flex-direction:column;width:100%}
  .tce-hero__actions .tce-btn{width:100%}
}

/* ── Buttons ──────────────────────────────────────────────────────── */
/* Two-class selectors so Elementor's `.elementor-kit-N a{color:…}` cannot win. */
a.tce-btn,
.tce-hero .tce-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 36px;border-radius:10px;
  font-size:17px;font-weight:600;text-decoration:none;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.tce-btn.tce-btn--primary,
.tce-hero .tce-btn--primary{
  color:#fff;
  background:linear-gradient(180deg,#2E6BF0,var(--tce-primary));
  box-shadow:0 10px 24px -8px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.28);
}
a.tce-btn.tce-btn--primary:hover,
.tce-hero .tce-btn--primary:hover{
  color:#fff;
  background:linear-gradient(180deg,var(--tce-primary),var(--tce-primary-hover));
  box-shadow:0 14px 30px -8px rgba(37,99,235,.75);
  transform:translateY(-1px);
}
a.tce-btn.tce-btn--ghost,
.tce-hero .tce-btn--ghost{
  color:var(--tce-hero-fg);
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
}
a.tce-btn.tce-btn--ghost:hover,
.tce-hero .tce-btn--ghost:hover{background:rgba(255,255,255,.20);color:var(--tce-hero-fg)}
a.tce-btn:focus-visible{outline:3px solid var(--tce-accent);outline-offset:3px}

/* ── Activity panel ───────────────────────────────────────────────── */
.tce-panel-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.tce-panel{width:100%;overflow:hidden;text-align:left}
.tce-panel--glass{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(14px);
  --tce-panel-fg:#fff; --tce-panel-line:rgba(255,255,255,.10);
}
.tce-panel--light{
  background:#fff;border:1px solid var(--tce-border);
  box-shadow:0 22px 48px -18px rgba(15,46,138,.20);
  --tce-panel-fg:#000; --tce-panel-line:var(--tce-border);
}
.tce-panel__bar{
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 24px;border-bottom:1px solid var(--tce-panel-line);
}
.tce-dot{width:10px;height:10px;border-radius:999px;background:color-mix(in srgb, var(--tce-panel-fg) 25%, transparent)}
.tce-panel__title{margin-left:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:color-mix(in srgb, var(--tce-panel-fg) 85%, transparent)}
.tce-panel__status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:color-mix(in srgb, var(--tce-panel-fg) 70%, transparent)}
.tce-status-dot{width:6px;height:6px;border-radius:999px;background:#34D399}

.tce-panel__rows{list-style:none;margin:0;padding:0}
.tce-panel__row{
  display:flex;align-items:center;gap:16px;
  padding:16px 24px;border-top:1px solid var(--tce-panel-line);
}
.tce-panel__rows .tce-panel__row:first-child{border-top:0}
.tce-panel__icon{
  flex:0 0 auto;width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--tce-panel-fg) 12%, transparent);
  color:#7FC0FF;
}
.tce-panel__icon svg{width:16px;height:16px}
.tce-panel--light .tce-panel__icon{background:#EFF6FF;color:var(--tce-primary)}
.tce-panel__text{flex:1;font-size:15px;line-height:1.5;color:color-mix(in srgb, var(--tce-panel-fg) 90%, transparent)}
.tce-panel__meta{font-size:13px;color:color-mix(in srgb, var(--tce-panel-fg) 50%, transparent);font-variant-numeric:tabular-nums}
.tce-panel__row.is-waiting{background:color-mix(in srgb, var(--tce-accent) 12%, transparent)}
.tce-panel__row.is-waiting .tce-panel__text{font-weight:600;color:var(--tce-panel-fg)}
.tce-panel__row.is-waiting .tce-panel__icon{background:#fff;color:var(--tce-primary)}
.tce-panel__meta.is-pill{
  background:#fff;color:var(--tce-deep);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;
}
.tce-panel--light .tce-panel__meta.is-pill{background:var(--tce-primary);color:#fff}
.tce-panel__caption{margin:0;font-size:13px;opacity:.65}

@media (max-width:640px){
  .tce-panel__meta:not(.is-pill){display:none}
  .tce-panel__row{padding:14px 16px;gap:12px}
}

/* ── Stat ─────────────────────────────────────────────────────────── */
.tce-stat{display:flex;flex-direction:column;gap:8px}
.tce-stat__row{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tce-stat__value{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tce-stat__label{font-size:16px;color:var(--tce-muted)}
.tce-stat__desc{margin:0;font-size:16px;line-height:1.62;color:var(--tce-muted)}

/* ── Motion safety ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .tce-hero .tce-hero-gl{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   Designed section components
   Two-class selectors throughout so Elementor's Global Kit
   (.elementor-kit-N h2 / a, specificity 0-1-1) cannot override them.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section header ───────────────────────────────────────────────── */
.tce-head{display:flex;flex-direction:column;gap:16px;width:100%}
.tce-head--center{align-items:center;text-align:center;margin-inline:auto}
.tce-head--left{align-items:flex-start;text-align:left}
.tce-head .tce-head__eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tce-primary);
}
.tce-head .tce-head__title{
  margin:0;color:var(--tce-ink);
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;
  font-weight:800;letter-spacing:-.03em;max-width:20ch;
}
.tce-head--center .tce-head__title{max-width:24ch}
.tce-head .tce-head__lead{
  margin:0;color:var(--tce-muted);
  font-size:clamp(16px,1.4vw,19px);line-height:1.62;max-width:62ch;
}
.tce-head--dark .tce-head__title{color:#fff}
.tce-head--dark .tce-head__lead{color:rgba(255,255,255,.85)}
.tce-head--dark .tce-head__eyebrow{color:var(--tce-accent)}

/* ── Card grid ────────────────────────────────────────────────────── */
.tce-grid{display:grid;gap:24px;width:100%}
.tce-grid--2{grid-template-columns:repeat(2,1fr)}
.tce-grid--3{grid-template-columns:repeat(3,1fr)}
.tce-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.tce-grid--3,.tce-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.tce-grid{grid-template-columns:1fr!important}}

.tce-grid .tce-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--tce-border);border-radius:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .22s cubic-bezier(.2,0,0,1),box-shadow .22s cubic-bezier(.2,0,0,1),border-color .22s;
}
.tce-grid .tce-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--tce-primary),var(--tce-accent));
  opacity:0;transition:opacity .22s;z-index:2;
}
.tce-grid .tce-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -18px rgba(15,46,138,.28);border-color:#BFD4FF}
.tce-grid .tce-card:hover::before{opacity:1}

.tce-card__media{
  background:linear-gradient(180deg,#EFF6FF,#fff);
  border-bottom:1px solid var(--tce-border);padding:16px;
}
.tce-card__media img{display:block;width:100%;height:168px;object-fit:contain}
.tce-card__body{display:flex;flex-direction:column;gap:14px;padding:32px;flex:1}
.tce-grid--image .tce-card__body{padding-top:28px}

.tce-card__chip{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(145deg,var(--tce-primary),var(--tce-accent));
  box-shadow:0 8px 18px -6px rgba(37,99,235,.55);color:#fff;
}
.tce-card__chip svg,.tce-card__chip i{width:22px;height:22px;font-size:20px;color:#fff;fill:#fff}
.tce-card__num{
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--tce-primary);
  font-variant-numeric:tabular-nums;
}
.tce-grid .tce-card__title{margin:0;color:var(--tce-ink);font-size:21px;font-weight:700;line-height:1.25}
.tce-grid .tce-card__text{margin:0;color:var(--tce-muted);font-size:16px;line-height:1.62}
.tce-grid .tce-card__foot{margin-top:auto;padding-top:8px;color:var(--tce-primary);font-size:14px;font-weight:600}

/* ── Split media + text ───────────────────────────────────────────── */
.tce-split{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%;
}
.tce-split--img-left .tce-split__text{order:2}
.tce-split--img-left .tce-split__media{order:1}
@media (max-width:900px){
  .tce-split{grid-template-columns:1fr;gap:40px}
  .tce-split__media{order:1!important}
  .tce-split__text{order:2!important}
}
.tce-split__text{display:flex;flex-direction:column;gap:20px}
.tce-split .tce-split__title{
  margin:0;color:var(--tce-ink);
  font-size:clamp(28px,3.4vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.03em;
}
.tce-split .tce-split__body{margin:0;color:var(--tce-muted);font-size:18px;line-height:1.62;max-width:54ch}
.tce-split__media{position:relative}
.tce-split__media img{display:block;width:100%;height:auto;border-radius:20px}
.tce-split__media.has-glow::before{
  content:'';position:absolute;inset:8%;z-index:-1;border-radius:999px;
  background:radial-gradient(closest-side,rgba(30,144,255,.45),transparent 70%);
  filter:blur(40px);
}

/* ── Tick list ────────────────────────────────────────────────────── */
.tce-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.tce-ticks li{display:flex;gap:14px;align-items:flex-start;color:var(--tce-ink);font-size:16px;line-height:1.6}
.tce-tick{
  flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;margin-top:2px;
  border-radius:999px;background:#EFF6FF;color:var(--tce-primary);
}
.tce-tick svg{width:13px;height:13px}

/* ── Callout ──────────────────────────────────────────────────────── */
.tce-callout{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--tce-border);border-radius:16px;padding:24px;
}
.tce-callout__icon{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:#EFF6FF;color:var(--tce-primary);
}
.tce-callout__icon svg{width:18px;height:18px}
.tce-callout p{margin:0;font-size:16px;line-height:1.6;color:var(--tce-ink)}
.tce-callout p span{display:block;margin-top:4px;color:var(--tce-muted)}