:root {
  --tci-black: #322f31;
  --tci-bg: #fcfcfc;
  --tci-primary: #a01983;
  --tci-purple: #b057a1;
  --tci-grey: #4b4c4e;
  --tci-dark-grey: #2c2c2c;
  --tci-light-gray: #e6e6e6;
  --tci-white: #ffffff;
  --tci-gradient: linear-gradient(90deg, #a01983 0%, #b057a1 100%);
  --tci-gradient-on-dark: linear-gradient(90deg, #ffffff 0%, #d9b7d1 100%);
  --tci-font-body: 'IBM Plex Sans', sans-serif;
  --tci-max: 1312px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--tci-bg);
  color: var(--tci-black);
  text-wrap: pretty;
}
.tci-page { width: 100%; margin: 0; }
.section-shell { border: 0; border-radius: 0; background: var(--tci-white); overflow: hidden; }
.hero {
  min-height: 560px;
  display: flex;
  align-items: stretch;
  padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px));
  padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px));
  background-image:
    radial-gradient(circle at 18% 100%, rgba(160, 25, 131, 0.22), transparent 24%),
    linear-gradient(90deg, #02050a 0%, rgba(2, 5, 10, 0.98) 24%, rgba(2, 5, 10, 0.76) 46%, rgba(2, 5, 10, 0.16) 76%, rgba(2, 5, 10, 0.02) 100%),
    url('assets/background-header.png');
  background-position: center center, center center, right center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}
.hero-overlay {
  width: min(520px, 100%);
  padding: 44px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-logo { width: 180px; margin-bottom: 26px; }
h1, h2, h3, h4 { margin: 0; }
.insight-copy h2,
.tiers h2,
.standards h2,
.who h2,
.final-cta h2 {
  text-transform: capitalize;
  background: linear-gradient(90deg, #505153 0%, #201e1f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-overlay h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.03; margin-bottom: 14px; color: #ffffff; }
.hero-overlay h1 span { color: var(--tci-purple); }
.hero-overlay p { color: #f5e6f2; margin-bottom: 20px; }
.btn-primary {
  display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px;
  border-radius: 999px; background: var(--tci-gradient); color: white; text-decoration: none; font-weight: 700;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  white-space: nowrap;
}

.form-insight { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 56px 20px; }
.form-card { background: #f8fafc; color: #0f172a; border-radius: 12px; padding: 16px; }
.form-card h3 {
  margin: -16px -16px 18px;
  padding: 16px 18px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--tci-primary), var(--tci-purple));
  color: var(--tci-white);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.form-card #hubspot-form { min-height: 200px; }
.form-card .hs-form { font-family: inherit; }
.form-card fieldset { max-width: none !important; }
.form-card .hs-form-field { margin-bottom: 1rem; }
.form-card .hs-form-field > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}
.form-card .hs-form-field .hs-input,
.form-card .hs-form-field input:not([type="checkbox"]):not([type="radio"]),
.form-card .hs-form-field select,
.form-card .hs-form-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid #d3dce9;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
}
.form-card .hs-form-field .hs-input:focus,
.form-card .hs-form-field input:focus,
.form-card .hs-form-field select:focus,
.form-card .hs-form-field textarea:focus {
  outline: none;
  border-color: #ff6a3d;
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.18);
}
.form-card .hs-submit { margin-top: 1.25rem; }
.form-card .hs-submit .actions { width: 100%; }
.form-card .hs-button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 20px;
  background: var(--tci-gradient) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
}
.form-card .hs-button:hover { filter: brightness(0.95); }
.form-card .hs-error-msgs {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: #dc2626;
}
.form-card .submitted-message {
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  padding: 0.75rem;
}
.form-disclaimer {
  margin: 0.8rem 0 0;
  font-size: 0.7rem;
  color: #64748b;
  text-align: center;
  text-wrap: balance;
}
.form-30day-disclaimer {
  margin: 18px 0 0;
  padding: 14px 16px;
  max-width: 100%;
  border-left: 4px solid var(--tci-primary);
  border-radius: 10px;
  background: #faf5f9;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  color: #5f1351;
  text-align: left;
}
.insight-copy h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 12px; line-height: 1; }
.insight-copy p, .insight-copy li { color: var(--tci-grey); }
.insight-copy .form-30day-disclaimer { color: #5f1351; }
.insight-copy ul { margin: 10px 0 14px 18px; }
.pilot-includes { margin: 0; }
.fine { font-size: 0.9rem; color: var(--tci-grey); }
.metrics {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.metrics h4 { text-transform: uppercase; color: var(--tci-primary); margin-bottom: 10px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metrics-grid div { background: var(--tci-white); border: 1px solid var(--tci-light-gray); border-radius: 10px; padding: 10px; }
.metric-icon { display: inline-block; font-size: 0.92rem; color: var(--tci-primary); background: #faf5f9; border: 1px solid #ead6e4; border-radius: 999px; padding: 6px; margin-bottom: 8px; }
.metrics-grid div .metric-icon { color: var(--tci-primary); border-color: #ead6e4; }
.metrics-grid strong { display: block; font-size: 1.35rem; color: var(--tci-primary); }
.metrics-grid span { font-size: 0.8rem; color: var(--tci-grey); }

.tiers { padding: 64px 20px; }
.tiers {
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 25, 131, 0.24), transparent 28%),
    radial-gradient(circle at 14% 28%, rgba(42, 240, 255, 0.12), transparent 24%),
    #070b12;
  border-color: transparent;
}
.tiers h2 { text-align: center; font-size: 2rem; }
.tiers h2 {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #ff4fbc 74%, #8f79ed 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.tiers h2 { color: var(--tci-white); text-transform: uppercase; letter-spacing: 0.01em; }
.tiers-sub { text-align: center; color: rgba(255, 255, 255, 0.76); margin: 10px 0 28px; }
.tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 16px; }
.pilot-offer {
  padding: 40px 20px;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 1fr;
  gap: 28px;
  align-items: center;
  background: #faf5f9;
}
.pilot-offer .pilot-includes {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.pilot-offer .pilot-includes ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  margin: 10px 0;
  padding-left: 18px;
}
.pilot-offer .pilot-includes li {
  margin: 0;
}
.pilot-offer .fine {
  margin-bottom: 0;
}
.pilot-offer .metrics {
  padding: 20px;
  border: 1px solid #ead6e4;
  border-radius: 14px;
  background: var(--tci-white);
}
.pilot-includes h4,
.metrics h4 { color: var(--tci-primary); }
.pilot-includes li,
.pilot-includes .fine,
.metrics-grid span { color: var(--tci-grey); }
.tier-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 22px 16px;
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.92), rgba(8, 13, 22, 0.92));
  color: var(--tci-white);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tier-popular {
  position: relative;
  border-color: #ff4fbc;
  box-shadow: 0 0 0 1px rgba(255, 79, 188, 0.7) inset, 0 0 30px rgba(143, 121, 237, 0.34);
}
.tier-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tci-white);
  background: var(--tci-gradient);
}
.tier-label { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; color: var(--tci-white); }
.tier-copy { color: rgba(255, 255, 255, 0.72); min-height: 50px; font-size: 0.9rem; }
.tier-loc { color: var(--tci-white); font-weight: 800; text-transform: uppercase; }
.tier-price { color: rgba(255, 255, 255, 0.58); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; }
.tier-price strong { display: block; font-size: 2.2rem; color: var(--tci-white); letter-spacing: 0; }
.tier-save { color: #ff4fbc; font-weight: 800; text-transform: uppercase; font-size: 0.82rem; }
.tier-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #ead6e4;
  background: #faf5f9;
  color: var(--tci-primary);
  font-size: 1.25rem;
}
.tier-card:nth-child(1) .tier-icon { color: #ffffff; border-color: #1ec7d4; background: #27cfda; }
.tier-card:nth-child(2) .tier-icon { color: #ffffff; border-color: #f06a2d; background: #ff8f5c; }
.tier-card:nth-child(3) .tier-icon { color: #ffffff; border-color: #a01983; background: #a01983; }
.tier-card:nth-child(4) .tier-icon { color: #ffffff; border-color: #6e56cf; background: #8f79ed; }
.tier-features {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tier-features i { color: var(--tci-primary); }
.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 6px 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.84);
  text-transform: uppercase;
}
.tier-card:nth-child(1) .feature-tag i { color: #31e6f3; }
.tier-card:nth-child(2) .feature-tag i { color: #ff9d6d; }
.tier-card:nth-child(3) .feature-tag i { color: #ff74da; }
.tier-card:nth-child(4) .feature-tag i { color: #9d8cff; }

.standards { padding: 64px 20px; background: var(--tci-black); color: var(--tci-white); }
.standards h2 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  margin-bottom: 14px;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.standards h2,
.final-cta h2 {
  background: var(--tci-gradient-on-dark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.standards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 920px;
  margin: 0 0 0 auto;
}
.standards-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.standards-grid li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 0.95rem; }
.standards-grid i {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--tci-primary);
  background: #faf5f9;
  border: 1px solid #ead6e4;
  flex: 0 0 24px;
}
.standards > p {
  text-align: center;
  max-width: 860px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.78);
}

.who { padding: 44px 20px; }
.who {
  background:
    radial-gradient(circle at 8% 18%, rgba(160, 25, 131, 0.2), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(176, 87, 161, 0.18), transparent 30%),
    #070b12;
  border-color: transparent;
}
.who-top { display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.35fr; gap: 34px; align-items: start; margin-bottom: 20px; }
.who-top img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); }
.who h2 {
  font-size: clamp(2.15rem, 4vw, 3.3rem);
  margin-bottom: 10px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ebd5e8 0%, #fcfcfc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.who h3 { display: flex; align-items: center; gap: 12px; text-transform: uppercase; margin-bottom: 12px; color: var(--tci-white); font-size: 0.9rem; letter-spacing: 0.11em; }
.who h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #ff6a3d, var(--tci-primary), transparent); }
.who p { color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; line-height: 1.55; margin: 0 0 10px; }
.accordion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.accordion-item {
  display: block;
}
.acc {
  width: 100%;
  min-height: 66px;
  text-align: left;
  background: rgba(12, 18, 30, 0.86);
  color: var(--tci-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.acc > i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: #ff4f8f;
  font-size: 1.15rem;
}
.accordion-item:nth-child(3n + 2) .acc > i { color: #b057ff; }
.accordion-item:nth-child(3n) .acc > i { color: #ff6a3d; }
.acc-copy { display: grid; gap: 2px; }
.acc-copy strong { font-size: 0.92rem; line-height: 1.1; }
.acc-copy small { color: rgba(255, 255, 255, 0.6); font-size: 0.76rem; line-height: 1.25; }
.acc-toggle {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.2rem;
  line-height: 1;
}
.panel { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 10px 12px; color: rgba(255, 255, 255, 0.72); background: rgba(12, 18, 30, 0.7); }

.final-cta {
  position: relative;
  min-height: 430px;
  padding: 72px 20px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(3, 10, 18, 0.98) 0%, rgba(3, 10, 18, 0.86) 38%, rgba(3, 10, 18, 0.3) 68%, rgba(3, 10, 18, 0.08) 100%),
    url('assets/tci-final-cta.png');
  background-position: center center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  color: var(--tci-white);
}
.final-cta > div { position: relative; z-index: 1; max-width: 560px; }
.final-cta h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 14px; line-height: 1.03; }
.final-cta h2 span { color: #d9b7d1; -webkit-text-fill-color: #d9b7d1; }
.final-cta p { color: rgba(255, 255, 255, 0.86); margin-bottom: 22px; max-width: 520px; }

/* ------------------------------------------------------------------ */
/* Simple Footer 1 - Figma 6401:1496                                  */
/* ------------------------------------------------------------------ */
.tci-footer {
  background: linear-gradient(180deg, #322f31 0%, #080708 100%);
  color: var(--tci-white);
  padding: 80px clamp(1.5rem, 4vw, 4rem) 40px;
  padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px));
  padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tci-footer__inner {
  width: 100%;
  max-width: var(--tci-max, 1312px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.tci-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.tci-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: var(--tci-white);
}

.tci-footer__col--office,
.tci-footer__col--connect {
  padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
  border-left: 1px solid color-mix(in srgb, var(--tci-white) 34%, transparent);
}

.tci-footer__title {
  margin: 0;
  font-family: var(--tci-font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tci-white);
}

.tci-footer__title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin-top: 0.75rem;
  background: #d320c2;
}

.tci-footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 0.75rem;
}

.tci-footer__social-link {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--tci-white) 74%, transparent);
  color: var(--tci-white);
  font-family: var(--tci-font-body);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
  text-transform: lowercase;
}

.tci-footer__social-link span {
  transform: translateY(-1px);
}

.tci-footer__address {
  margin: 0;
  font-family: var(--tci-font-body);
  font-size: clamp(1rem, 0.45vw + 0.92rem, 1.125rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--tci-white) 94%, transparent);
}

.tci-footer__phone-row {
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--tci-font-body);
  font-size: clamp(1rem, 0.45vw + 0.92rem, 1.125rem);
  line-height: 1.45;
}

.tci-footer__phone-row a {
  color: color-mix(in srgb, var(--tci-white) 94%, transparent);
  text-decoration: none;
}

.tci-footer__phone-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #d320c2;
  color: #d320c2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tci-footer__brand {
  width: min(100%, 460px);
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tci-footer__brand a {
  display: block;
  width: 100%;
}

.tci-footer__logo {
  width: min(100%, 420px);
  height: auto;
  object-fit: contain;
  display: block;
}

.section-shell:not(.hero) {
  padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px));
  padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px));
}

@media (max-width: 980px) {
  .form-insight { grid-template-columns: 1fr; }
  .pilot-offer { grid-template-columns: 1fr; gap: 20px; }
  .accordion-grid { grid-template-columns: 1fr; }
  .tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .standards-grid, .who-top { grid-template-columns: 1fr; }
  .hero {
    min-height: 520px;
    background-image:
      radial-gradient(circle at 20% 100%, rgba(160, 25, 131, 0.22), transparent 30%),
      linear-gradient(180deg, rgba(2, 5, 10, 0.92) 0%, rgba(2, 5, 10, 0.76) 100%),
      url('assets/background-header.jpg');
    background-position: center center, center center, center center;
  }
  .hero-overlay { width: 100%; }
  .final-cta {
    min-height: 500px;
    background-image:
      linear-gradient(180deg, rgba(3, 10, 18, 0.94) 0%, rgba(3, 10, 18, 0.82) 58%, rgba(3, 10, 18, 0.62) 100%),
      url('assets/troc-image1.png');
    background-position: center center;
  }
  .standards-grid li { white-space: normal; }
}

@media (max-width: 900px) {
  .tci-footer {
    padding: 64px 24px 32px;
  }

  .tci-footer__inner {
    gap: 2rem;
  }

  .tci-footer__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tci-footer__col {
    align-items: center;
    text-align: center;
  }

  .tci-footer__brand {
    min-height: 0;
    width: 100%;
    justify-content: center;
  }

  .tci-footer__title::after {
    margin-inline: auto;
  }

  .tci-footer__social,
  .tci-footer__phone-row {
    justify-content: center;
  }

  .tci-footer__col--office,
  .tci-footer__col--connect {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--tci-white) 28%, transparent);
    padding-left: 0;
    padding-top: 1.25rem;
  }
}

@media (max-width: 560px) {
  .tiers-grid { grid-template-columns: 1fr; }
  .pilot-offer .pilot-includes ul { grid-template-columns: 1fr; }
  .tci-footer {
    padding: 56px 20px 28px;
  }

  .tci-footer__brand {
    width: 240px;
    height: auto;
    min-height: 0;
  }
}
