/* ==========================================================================
   iGentrix public site: softened brutalism
   Loaded last in ContisShell, on top of the Contis template.
   Visible structure (ink borders, hard offset shadows, flat colour blocks,
   big grotesk type, mono labels) with the edges taken off: rounded corners,
   warm paper, and pastel tints of the logo colours.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

:root {
  --sb-paper: #f4f1ea;
  --sb-surface: #fbfaf6;
  --sb-ink: #141414;
  --sb-text: #33332f;
  --sb-muted: #5f5e58;
  --sb-blue: #4285f4;
  --sb-blue-soft: #dbe7fd;
  --sb-yellow-soft: #ffecae;
  --sb-green-soft: #d3eedb;
  --sb-red-soft: #fbd6d1;
  --sb-lilac-soft: #e6e0f3;

  --sb-border: 2px solid var(--sb-ink);
  --sb-radius: 16px;
  --sb-radius-lg: 24px;
  --sb-shadow: 5px 5px 0 var(--sb-ink);
  --sb-shadow-lg: 8px 8px 0 var(--sb-ink);
  --sb-shadow-hover: 8px 8px 0 var(--sb-ink);

  --sb-display: "Archivo", "DM Sans", sans-serif;
  --sb-body: "Inter", sans-serif;
  --sb-mono: "JetBrains Mono", ui-monospace, monospace;

  --sb-section: clamp(88px, 11vw, 144px);

  /* The template reads these; point them at the new palette. */
  --colorPrimary: var(--sb-blue);
  --colorSecondary: var(--sb-ink);
  --paraColor: var(--sb-text);
  --paraFont: var(--sb-body);
  --headingFont: var(--sb-display);
  --background-brand-2: var(--sb-paper);
}

/* ---------- Base ---------- */

body {
  background: var(--sb-paper);
  color: var(--sb-text);
  font-family: var(--sb-body);
  -webkit-font-smoothing: antialiased;
}

p,
span {
  font-size: 17px;
  line-height: 1.65;
  color: var(--sb-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sb-display);
  color: var(--sb-ink);
  letter-spacing: -0.02em;
}

::selection {
  background: var(--sb-yellow-soft);
  color: var(--sb-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sb-blue) !important;
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */

.tf__common_btn,
.tf__unlock_btn a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sb-body);
  font-size: 16px;
  font-weight: 600;
  padding: 15px 24px;
  background: var(--sb-ink);
  color: #fff;
  border: var(--sb-border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--sb-blue);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tf__common_btn i,
.tf__unlock_btn a i {
  margin-left: 0;
  color: inherit !important;
}

.tf__common_btn:hover,
.tf__unlock_btn a:hover,
.tf__unlock .tf__unlock_btn a:hover {
  background: var(--sb-ink);
  color: #fff !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--sb-blue);
}

.tf__common_btn:active,
.tf__unlock_btn a:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--sb-blue);
}

/* Secondary: outlined on paper. */
.tf__common_btn2,
.tf__accrodian_link {
  background: var(--sb-surface) !important;
  color: var(--sb-ink) !important;
  border: var(--sb-border) !important;
  box-shadow: 4px 4px 0 var(--sb-ink) !important;
}

.tf__common_btn2 i,
.tf__accrodian_link i {
  color: var(--sb-ink) !important;
}

.tf__common_btn2:hover,
.tf__accrodian_link:hover {
  background: var(--sb-yellow-soft) !important;
  color: var(--sb-ink) !important;
  border-color: var(--sb-ink) !important;
  box-shadow: 6px 6px 0 var(--sb-ink) !important;
}

.tf__common_btn2:hover i {
  color: var(--sb-ink) !important;
}

/* ---------- Section headings ---------- */

.tf__common_heading {
  max-width: 900px;
  margin: 0 auto;
}

.tf__common_heading h6,
.tf__banner_text h6 {
  display: inline-block;
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink);
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
}

.tf__common_heading h2 {
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: clamp(48px, 6vw, 72px);
  text-wrap: balance;
}

/* ---------- Topbar & navigation ---------- */

/* Centred with flex, not line-height: the site-wide paragraph line-height
   would otherwise pin the text to the top of the bar. */
.tf__topbar {
  background: var(--sb-yellow-soft);
  border-bottom: var(--sb-border);
  height: 40px;
  line-height: normal;
  display: flex;
  align-items: center;
}

.tf__topbar .container {
  width: 100%;
}

.tf__topbar p {
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sb-ink);
}

/* The fixed topbar (40px) and menu (76px) sit over the page, so the first
   section clears them plus one consistent gap, whatever the page's own
   padding class says. */
.tf__main_menu ~ section:first-of-type {
  padding-top: calc(116px + clamp(56px, 7vw, 88px)) !important;
}

.tf__topbar p a {
  color: var(--sb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
}

/* Always opaque, so content never shows through the menu while scrolling. */
.tf__main_menu,
.tf__main_menu.menu_fix {
  background: var(--sb-paper);
  border-bottom: var(--sb-border);
  height: 76px;
  padding: 0 clamp(16px, 3vw, 40px);
}

.tf__main_menu .navbar-nav .nav-item {
  padding: 0 18px;
}

.tf__main_menu .navbar-nav .nav-item > a {
  font-family: var(--sb-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--sb-text);
  letter-spacing: 0;
  text-transform: none;
  line-height: 74px;
  position: relative;
}

.tf__main_menu .navbar-nav .nav-item:hover > a,
.tf__main_menu .navbar-nav .nav-item > a.active {
  color: var(--sb-ink);
}

.tf__main_menu .navbar-nav .nav-item > a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--sb-blue);
}

.tf__menu_btn li a {
  font-size: 15px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  color: var(--sb-ink);
  border: var(--sb-border);
  background: var(--sb-surface);
}

.tf__menu_btn li a:hover {
  background: var(--sb-yellow-soft);
  color: var(--sb-ink) !important;
}

.tf__menu_2nd_btn,
.tf__menu_btn li a.tf__menu_2nd_btn {
  background: var(--sb-ink);
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--sb-blue);
  margin-left: 12px;
}

.tf__menu_2nd_btn:hover,
.tf__menu_btn li a.tf__menu_2nd_btn:hover {
  background: var(--sb-ink) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--sb-blue);
}

/* ---------- Hero ---------- */

.tf__banner {
  background: var(--sb-paper);
  padding-bottom: var(--sb-section);
}

.tf__banner::after,
.tf__banner_text::before,
.tf__banner_text::after {
  display: none;
}

.tf__banner_text h1 {
  font-size: clamp(52px, 8.2vw, 116px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0 auto 28px;
  text-wrap: balance;
}

.tf__banner_text p {
  font-family: var(--sb-body);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--sb-text);
  margin-bottom: 40px;
}

.tf__banner_img {
  height: auto;
  margin-top: 72px;
  border: var(--sb-border);
  border-radius: var(--sb-radius-lg);
  box-shadow: 10px 10px 0 var(--sb-ink);
  overflow: hidden;
  background: var(--sb-surface);
}

.tf__banner_img img {
  border-radius: 0;
  display: block;
}

/* ---------- Logos + services ---------- */

.tf__service {
  background: var(--sb-paper);
  border-radius: 0;
  border-top: var(--sb-border);
}

.tf__brand {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.tf__brand img {
  filter: grayscale(1) contrast(1.1);
  opacity: 0.75;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.tf__brand a:hover img {
  filter: none;
  opacity: 1;
}

.tf__main_service {
  background: var(--sb-ink);
  border: var(--sb-border);
  border-radius: 32px;
  margin: 0 clamp(12px, 3vw, 40px) var(--sb-section) !important;
  padding-top: var(--sb-section) !important;
  padding-bottom: calc(var(--sb-section) - 24px) !important;
}

.tf__main_service .tf__common_heading h2 {
  color: #fff;
}

.tf__main_service .tf__common_heading h6 {
  background: var(--sb-ink);
  color: #fff;
  border-color: #fff;
}

.tf__single_service {
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 20px;
  padding: 36px 32px 34px;
  box-shadow: 6px 6px 0 var(--sb-blue);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Card grids: a card that is alone in its column fills the column's height,
   so cards in a row line up. The spacing between rows then has to come from
   the card's own margin (subtracted from its height). Columns that stack
   several cards (About's benefits) keep natural heights: stretching those
   makes each card as tall as the whole column and they spill out. */
[class*="col-"] > .tf__single_service:only-child {
  height: 100%;
}

.tf__single_service.mb-4,
.tf__single_benifit.mb-4 {
  margin-bottom: 32px !important;
}

[class*="col-"] > .tf__single_service.mb-4:only-child,
[class*="col-"] > .tf__single_benifit.mb-4:only-child {
  height: calc(100% - 32px);
}

.tf__main_features .row {
  --bs-gutter-x: 2rem;
}

.tf__single_service:hover {
  background: var(--sb-surface);
  border-color: var(--sb-ink);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--sb-blue);
}

/* Undo the template's hover, which turned the text white on a light card. */
.tf__single_service:hover a,
.tf__single_service:hover .tf__single_service_link,
.tf__single_service:hover p,
.tf__single_service:hover ul li {
  color: inherit !important;
}

.tf__single_service > span {
  width: 56px;
  height: 56px;
  line-height: 56px;
  border: var(--sb-border);
  border-radius: 14px;
  background: var(--sb-blue-soft);
  margin-bottom: 24px;
}

.tf__main_service .row .row > div:nth-child(6n + 2) .tf__single_service > span { background: var(--sb-yellow-soft); }
.tf__main_service .row .row > div:nth-child(6n + 3) .tf__single_service > span { background: var(--sb-green-soft); }
.tf__main_service .row .row > div:nth-child(6n + 4) .tf__single_service > span { background: var(--sb-red-soft); }
.tf__main_service .row .row > div:nth-child(6n + 5) .tf__single_service > span { background: var(--sb-lilac-soft); }
.tf__main_service .row .row > div:nth-child(6n + 6) .tf__single_service > span { background: var(--sb-yellow-soft); }

.tf__main_features .row > div:nth-child(6n + 2) .tf__single_service > span { background: var(--sb-yellow-soft); }
.tf__main_features .row > div:nth-child(6n + 3) .tf__single_service > span { background: var(--sb-green-soft); }
.tf__main_features .row > div:nth-child(6n + 4) .tf__single_service > span { background: var(--sb-red-soft); }
.tf__main_features .row > div:nth-child(6n + 5) .tf__single_service > span { background: var(--sb-lilac-soft); }
.tf__main_features .row > div:nth-child(6n + 6) .tf__single_service > span { background: var(--sb-yellow-soft); }

.tf__single_service > span i {
  color: var(--sb-ink);
  font-size: 24px;
}

.tf__single_service a,
.tf__single_service .tf__single_service_link {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sb-ink) !important;
}

.tf__single_service p {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 12px;
  color: var(--sb-text);
}

.tf__single_service ul {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px dashed rgba(20, 20, 20, 0.2);
}

.tf__single_service ul li {
  list-style: none;
  margin: 0 0 6px;
  font-family: var(--sb-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-ink);
  text-transform: none;
}

.tf__single_service ul li::before {
  content: "→ ";
  color: var(--sb-blue);
}

/* The promo card beside the services, laid out as a full-width band. */
.tf__single_service_right {
  background: var(--sb-yellow-soft);
  border: var(--sb-border);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 48px);
  box-shadow: 8px 8px 0 var(--sb-blue);
  margin-top: 16px;
}

.tf__single_service_right::after {
  display: none;
}

.tf__single_service_right img {
  max-width: 180px;
}

.tf__single_service_right_heading {
  font-family: var(--sb-display);
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--sb-ink) !important;
  margin: 0 0 14px;
}

.tf__single_service_right p {
  color: var(--sb-text) !important;
  font-size: 18px;
  margin-bottom: 28px;
}

/* ---------- How it works ---------- */

.tf__work_process {
  background: var(--sb-paper);
  padding-top: 0 !important;
  padding-bottom: var(--sb-section) !important;
}

/* Patterned backdrop, with the product screenshot (the ::after) overlapping it. */
.tf__work_process_img {
  border: var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-surface);
}

.tf__work_process_img > img {
  border-radius: 22px;
}

.tf__work_process_img::after {
  border: var(--sb-border);
  border-radius: 16px;
  box-shadow: var(--sb-shadow-lg);
}

.tf__process_accordion .accordion-item {
  margin-bottom: 18px;
}

.tf__process_accordion .tf__process_accordion_btn {
  font-family: var(--sb-display);
  font-size: 21px !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sb-ink) !important;
  gap: 18px;
}

.tf__process_accordion .accordion-item .tf__process_accordion_btn span {
  width: 48px !important;
  height: 48px !important;
  font-family: var(--sb-mono);
  font-size: 18px;
  background: var(--sb-surface);
  color: var(--sb-ink);
  border: var(--sb-border);
  border-radius: 12px;
}

.tf__process_accordion .tf__process_accordion_btn:not(.collapsed) span {
  background: var(--sb-blue) !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--sb-ink);
}

.tf__process_accordion .accordion-collapse::after {
  background: var(--sb-ink);
  width: 2px;
}

.tf__process_accordion .accordion-body p {
  font-size: 17px;
  margin-bottom: 20px;
}

.tf__counter {
  border: var(--sb-border);
  border-radius: 28px;
  background: var(--sb-blue-soft);
  box-shadow: var(--sb-shadow-lg);
  padding: clamp(32px, 4vw, 56px);
  margin-top: var(--sb-section) !important;
}

.tf__counter {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}

.tf__counter_text,
.tf__counter_img {
  float: none;
}

.tf__counter_text {
  flex: 1;
  width: auto;
}

.tf__counter_img {
  flex: 0 0 clamp(120px, 20%, 200px);
  width: auto;
  height: auto;
}

.tf__counter_text h2,
.tf__counter_text h4 {
  text-align: left;
}

.tf__counter_text h2 {
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(56px, 8vw, 110px);
  letter-spacing: -0.03em;
  line-height: 1;
}

.tf__counter_text h2 span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.tf__counter_text h4 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Capability panels ---------- */

.tf__content_creator {
  background: var(--sb-blue-soft);
  border-radius: 0;
  border-top: var(--sb-border);
  border-bottom: var(--sb-border);
  padding-top: var(--sb-section) !important;
  padding-bottom: var(--sb-section) !important;
}

.tf__content_creator_top,
.tf__single_content_creator_bottom {
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 28px;
  box-shadow: var(--sb-shadow-lg);
}

.tf__content_creator_top {
  padding: clamp(40px, 5vw, 72px) 0;
  margin-bottom: 40px;
}

.tf__single_content_creator_bottom {
  padding: clamp(28px, 3.5vw, 44px);
  height: calc(100% - 40px);
  margin-bottom: 40px;
}

.tf__content_creator_top_img,
.tf__single_content_creator_bottom_img {
  border: var(--sb-border);
  border-radius: 18px;
  overflow: hidden;
}

.tf__content_creator_top_text h4,
.tf__single_content_creator_bottom_text h4 {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.tf__single_content_creator_bottom_text h4 {
  margin-top: 32px;
}

.tf__content_creator_top_text p,
.tf__single_content_creator_bottom_text p {
  font-size: 18px;
  margin-bottom: 24px;
}

.tf__content_creator_top_text ul {
  margin-bottom: 32px;
}

.tf__content_creator_top_text ul li,
.tf__single_pricing ul li,
.tf__unlock_text ul li {
  font-size: 16px;
  color: var(--sb-ink);
}

.tf__content_creator_top_text ul li::before,
.tf__single_pricing ul li::before {
  color: var(--sb-blue);
}

/* ---------- Testimonials ---------- */

.tf__testimonial {
  background: var(--sb-ink);
  border-radius: 0;
}

/* Light variants (Pricing, About): keep their dark heading readable. */
.tf__testimonial.tf__pricing_testimonial {
  background: var(--sb-blue-soft);
  border-top: var(--sb-border);
}

.tf__testimonial.tf__about_testimonial {
  background: var(--sb-paper);
}

.tf__testimonial {
  padding-top: var(--sb-section) !important;
}

.tf__testimonial.tf__pricing_testimonial .nextArrow,
.tf__testimonial.tf__pricing_testimonial .prevArrow,
.tf__testimonial.tf__about_testimonial .nextArrow,
.tf__testimonial.tf__about_testimonial .prevArrow {
  box-shadow: 3px 3px 0 var(--sb-ink);
}

.tf__single_testimonial {
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 28px;
  box-shadow: 10px 10px 0 var(--sb-blue);
}

.tf__single_testimonial::after {
  display: none;
}

.tf__testimonial .nextArrow,
.tf__testimonial .prevArrow {
  background: var(--sb-surface);
  color: var(--sb-ink);
  border: var(--sb-border);
}

.tf__testimonial .nextArrow:hover,
.tf__testimonial .prevArrow:hover {
  background: var(--sb-yellow-soft);
  color: var(--sb-ink);
}

/* ---------- Pricing ---------- */

.tf__pricing {
  background: var(--sb-paper);
  padding-top: var(--sb-section) !important;
  padding-bottom: calc(var(--sb-section) - 24px) !important;
}

.tf__single_pricing {
  height: calc(100% - 24px);
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 24px;
  padding: 40px 34px;
  box-shadow: var(--sb-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Lift instead of the template's full dark inversion. */
.tf__single_pricing:hover {
  background: var(--sb-surface);
  transform: translate(-3px, -3px);
  box-shadow: var(--sb-shadow-hover);
}

.tf__single_pricing:hover h5,
.tf__single_pricing:hover p,
.tf__single_pricing:hover span,
.tf__single_pricing:hover ul li {
  color: inherit !important;
}

.tf__single_pricing:hover .tf__pricing_btn {
  background: var(--sb-ink);
  color: #fff;
}

.tf__single_pricing.tf__pricing_featured {
  background: var(--sb-yellow-soft);
  box-shadow: 8px 8px 0 var(--sb-ink);
}

.tf__single_pricing h5 {
  font-size: 30px;
  font-weight: 700;
}

.tf__single_pricing {
  position: relative;
}

/* Sticker on the card's top edge, so it never pushes the plan name around. */
.tf__single_pricing .tf__pricing_badge {
  position: absolute;
  top: -15px;
  right: 24px;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 var(--sb-ink);
  display: inline-block;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-ink);
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 999px;
  padding: 4px 12px;
}

.tf__single_pricing p {
  font-size: 16px;
}

.tf__single_pricing p span {
  font-family: var(--sb-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sb-ink);
}

.tf__single_pricing .tf__pricing_price {
  white-space: nowrap;
}

/* Room for a two-line description (three at the narrowest 3-up width), so
   prices and buttons line up across the cards. */
.tf__single_pricing h5 + p {
  min-height: calc(2 * 1.65em);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .tf__single_pricing h5 + p {
    min-height: calc(3 * 1.65em);
  }
}

.tf__single_pricing .tf__pricing_price small {
  font-size: 16px;
  color: var(--sb-muted);
  margin-left: 6px;
}

.tf__single_pricing ul {
  border-top: 2px dashed rgba(20, 20, 20, 0.2);
  padding-top: 22px;
  margin-top: 22px;
}

.tf__single_pricing ul li {
  margin-bottom: 10px;
}

.tf__pricing_included {
  max-width: 820px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 17px;
}

.tf__pricing_included strong {
  color: var(--sb-ink);
}

.tf__pricing_btn {
  margin: 22px 0 26px;
}

/* ---------- FAQ ---------- */

.tf__faq {
  background: var(--sb-green-soft);
  border-radius: 0;
  border-top: var(--sb-border);
  padding-top: var(--sb-section) !important;
}

.tf__faq_accordion .accordion-item {
  background: var(--sb-surface);
  border: var(--sb-border) !important;
  border-radius: 18px !important;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--sb-ink);
}

.tf__faq_accordion .accordion-button {
  font-family: var(--sb-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--sb-ink);
  background: transparent;
  padding: 22px 26px;
}

.tf__faq_accordion .accordion-button,
.tf__faq_accordion .accordion-button.collapsed {
  text-align: left;
  justify-content: space-between;
  gap: 16px;
}

.tf__faq_accordion .accordion-body {
  padding: 0 26px 24px;
}

.tf__faq_accordion .accordion-body p {
  font-size: 17px;
}

/* ---------- Footer & final CTA ---------- */

.tf__footer {
  background: var(--sb-paper);
  border-top: var(--sb-border);
}

/* The CTA panel is pulled up 141px (template margin) to straddle the section
   above it. Reserve that overlap under whichever section precedes the footer,
   so it never covers content. */
section:has(+ .tf__footer .tf__unlock) {
  padding-bottom: calc(var(--sb-section) + 141px) !important;
}

/* Footer without the CTA panel (e.g. Pricing): sit flush under the section
   above, with its own breathing room inside. */
.tf__footer:not(:has(.tf__unlock)) {
  margin-top: 0 !important;
  padding-top: clamp(56px, 7vw, 88px);
}

.tf__unlock {
  margin-top: -141px;
  background: var(--sb-ink);
  border: var(--sb-border);
  border-radius: 32px;
  box-shadow: 10px 10px 0 var(--sb-blue);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 88px);
}

.tf__unlock .tf__common_heading h6 {
  background: var(--sb-ink);
  color: #fff;
  border-color: #fff;
}

.tf__unlock .tf__common_heading h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  margin-bottom: 20px;
}

.tf__unlock_text ul li {
  color: #fff;
}

.tf__unlock_btn a {
  background: var(--sb-surface);
  color: var(--sb-ink);
  box-shadow: 4px 4px 0 var(--sb-blue);
}

.tf__unlock_btn a:hover,
.tf__unlock .tf__unlock_btn a:hover {
  background: var(--sb-yellow-soft);
  color: var(--sb-ink) !important;
}

.tf__quick_link h5,
.tf__address h5,
.tf__footer h5 {
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink);
}

.tf__quick_link ul li a {
  font-size: 16px;
  color: var(--sb-text);
  line-height: 2;
}

.tf__quick_link ul li a:hover {
  color: var(--sb-ink);
}

.tf__footer_singup input {
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 12px;
  font-size: 16px;
  padding: 13px 16px;
}

.tf__copyright {
  border-top: 2px solid rgba(20, 20, 20, 0.12);
  padding-top: 28px;
}

.tf__copyright p,
.tf__copyright a {
  font-size: 15px;
  color: var(--sb-muted);
}

.tf__copyright a:hover {
  color: var(--sb-ink);
}

/* ---------- Inner pages ---------- */

.tf__about_footer,
.tf__features_footer,
.tf__benefits,
.tf__contact_footer,
.tf__about_faq,
.tf__about_testimonial,
.tf__blog_iteam,
.tf__main_features,
.tf___main_benefits {
  background: var(--sb-paper);
  border-radius: 0;
}

.tf__single_benifit,
.tf__single_about_testimonial,
.tf__single_blog,
.tf__contact_area,
.tf__blog_details_right {
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 20px;
  box-shadow: var(--sb-shadow);
}

.tf__single_benifit span,
.tf__contact_area span {
  background: var(--sb-blue-soft);
  color: var(--sb-ink);
  border: var(--sb-border);
}

.tf__single_benifit:hover span,
.tf__contact_area:hover span {
  background: var(--sb-yellow-soft);
  color: var(--sb-ink);
}

.tf__contact_area:hover {
  background: var(--sb-surface);
  transform: translate(-3px, -3px);
  box-shadow: var(--sb-shadow-hover);
}

.tf__contact_area:hover h4,
.tf__contact_area:hover p,
.tf__contact_area:hover a {
  color: inherit !important;
}

.tf__single_blog_img,
.tf__team_img {
  border: var(--sb-border);
  border-radius: 18px;
  overflow: hidden;
}

.tf__team_img::after {
  display: none;
}

.tf__single_blog_link,
.tf__blog_post_tag ul li a {
  font-family: var(--sb-mono);
  font-size: 13px;
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: 999px;
  padding: 4px 12px;
}

.tf__blog_search input,
.tf__blog_form_input input,
.tf__blog_form_input textarea,
.tf__contact_form_input input,
.tf__contact_form_input textarea,
.tf__blog_details_right input {
  background: var(--sb-surface) !important;
  border: var(--sb-border) !important;
  border-radius: 12px;
  font-size: 16px;
  color: var(--sb-ink);
}

.tf__blog_details_left_text p,
.tf__blog_details_left_text li {
  font-size: 18px;
  line-height: 1.75;
}

/* Long-form reading (legal pages, articles): a comfortable line length. */
.tf__blog_details_left {
  max-width: 760px;
  margin: 0 auto;
}

.tf__blog_details_left h3,
.tf__blog_details_left h4,
.tf__blog_details_left h5 {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 44px 0 12px;
}

/* Blog filters (jQuery nice-select). */
.tf__blog_selectbox li .select_js,
.tf__blog_selectbox .nice-select {
  background: var(--sb-surface) !important;
  border: var(--sb-border) !important;
  border-radius: 10px !important;
  color: var(--sb-ink);
  font-weight: 500;
}

.tf__blog_selectbox .nice-select .list {
  border: var(--sb-border);
  border-radius: 12px;
  box-shadow: var(--sb-shadow);
}

/* Contact form band */
.tf__contact_form {
  background: var(--sb-blue-soft);
  border-top: var(--sb-border);
  border-bottom: var(--sb-border);
}

.tf__contact_form_input input,
.tf__contact_form_input textarea {
  box-shadow: 3px 3px 0 var(--sb-ink);
}

.tf__blog_form_input label,
.tf__contact_form_input label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-ink);
  margin-bottom: 8px;
}

/* Left-aligned page intros (About and similar), sized for a half-width column. */
.tf__common_heading2 {
  text-align: left;
}

.tf__common_heading2 h2 {
  font-size: clamp(36px, 4vw, 58px);
  margin-bottom: 24px !important; /* template forces 8px with !important */
}

/* Body text, not the template's medium-weight heading font. */
.tf__common_heading2 p {
  font-family: var(--sb-body);
  font-weight: 400;
  font-size: 19px;
  color: var(--sb-text);
  margin-bottom: 32px;
}

/* About hero: product facts in place of a photo. */
.tf__about_facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  background: var(--sb-surface);
  border: var(--sb-border);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-lg);
  overflow: hidden;
}

.tf__about_facts > div {
  padding: clamp(24px, 3vw, 36px);
  border-bottom: var(--sb-border);
}

.tf__about_facts > div:nth-child(odd) {
  border-right: var(--sb-border);
}

.tf__about_facts > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.tf__about_facts > div:nth-child(1) { background: var(--sb-blue-soft); }
.tf__about_facts > div:nth-child(4) { background: var(--sb-yellow-soft); }

.tf__about_facts dt {
  font-family: var(--sb-display);
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sb-ink);
  margin-bottom: 12px;
}

.tf__about_facts dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sb-text);
}

/* Team intro sits level with the heading, below its tag. */
.tf__team_text {
  padding-top: 56px;
}

.tf__about_img {
  border: var(--sb-border);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-lg);
  overflow: hidden;
}

/* "Runs on" logo strip (BrandStrip). The logos have the soft blue baked into
   their backgrounds, so the tiles use that exact colour. */
.tf__brand_strip {
  padding: clamp(48px, 6vw, 72px) 0;
  text-align: center;
}

.tf__brand_strip_label {
  display: inline-block;
  font-family: var(--sb-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-muted);
  margin-bottom: 20px;
}

.tf__brand_strip_list {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.tf__brand_strip_list li {
  height: 88px;
  background: #dceafe;
  border: var(--sb-border);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--sb-ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf__brand_strip_list img {
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
}

/* ---------- Small screens ---------- */

@media (max-width: 991.98px) {
  .tf__main_menu,
  .tf__main_menu.menu_fix {
    height: auto;
    min-height: 68px;
  }

  /* Full-width dropdown panel under the header. */
  .tf__main_menu .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 !important; /* template adds a 15px top margin */
    background: var(--sb-paper);
    border-top: var(--sb-border);
    border-bottom: var(--sb-border);
    padding: 8px clamp(16px, 3vw, 40px) 24px;
    box-shadow: 0 12px 0 rgba(20, 20, 20, 0.06);
  }

  .tf__main_menu .navbar-nav,
  .tf__main_menu .tf__menu_btn {
    background: transparent !important;
    box-shadow: none !important;
  }

  .tf__main_menu .navbar-nav .nav-item {
    padding: 0;
    border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  }

  .tf__main_menu .tf__menu_btn {
    padding-top: 20px;
  }

  .tf__main_menu .navbar-toggler {
    border: var(--sb-border);
    border-radius: 10px;
    background: var(--sb-surface);
    color: var(--sb-ink);
    box-shadow: 3px 3px 0 var(--sb-ink);
  }

  .tf__main_menu .navbar-toggler i {
    color: var(--sb-ink);
  }

  .tf__main_menu .navbar-nav .nav-item > a {
    line-height: 48px;
  }

  .tf__main_menu .navbar-nav .nav-item > a.active::after {
    bottom: 8px;
    right: auto;
    width: 32px;
  }
}

@media (max-width: 991.98px) {
  .tf__about_facts {
    margin-top: 48px;
  }

  .tf__team_text {
    padding-top: 0;
  }
}

@media (max-width: 767.98px) {
  .tf__about_facts {
    grid-template-columns: 1fr;
  }

  .tf__about_facts > div:nth-child(odd) {
    border-right: 0;
  }

  .tf__about_facts > div:nth-last-child(2) {
    border-bottom: var(--sb-border);
  }

  .tf__brand_strip_list {
    grid-template-columns: 1fr 1fr;
  }

  .tf__brand_strip_list li.is-wide {
    grid-column: 1 / -1;
  }

  /* The announcement doesn't fit on one line at phone width; drop it and pull the menu up. */
  .tf__topbar {
    display: none;
  }

  .tf__main_menu,
  .tf__main_menu.menu_fix {
    top: 0;
  }

  /* No topbar on phones; the menu is a fixed 72px (its dropdown is an overlay). */
  .tf__main_menu,
  .tf__main_menu.menu_fix {
    height: 72px;
    min-height: 0;
    display: flex;
    align-items: center;
  }

  .tf__main_menu .container-fluid {
    height: 100%;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .tf__main_menu .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tf__main_menu ~ section:first-of-type {
    padding-top: calc(72px + 48px) !important;
  }

  .tf__counter {
    flex-direction: column;
    text-align: center;
  }

  .tf__counter_text h2,
  .tf__counter_text h4 {
    text-align: center;
  }

  p,
  span {
    font-size: 16px;
  }

  .tf__main_service {
    border-radius: 24px;
  }

  .tf__single_service {
    padding: 28px 24px;
  }

  .tf__unlock {
    box-shadow: 6px 6px 0 var(--sb-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The template animates almost everything (transition: all 0.3s, the
     slider, the sticky menu); this file only loads on the public site, so
     settle all of it at once. Durations stay above zero so transitionend
     still fires for Bootstrap's collapse and the Slick slider. */
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tf__common_btn:hover,
  .tf__unlock .tf__unlock_btn a:hover,
  .tf__single_service:hover,
  .tf__single_pricing:hover,
  .tf__contact_area:hover {
    transform: none;
  }
}

/* ---------- App components on the public site ---------- */

/* The cookie banner and settings dialog (components/cookie-consent.tsx) use
   the app's Tailwind components, marked `app-ui`. Tailwind's rules live in
   cascade layers, so the template's unlayered ones (`* { padding: 0 }`,
   `button`, `p`, `label`...) would win: revert them to the Tailwind values.
   Bootstrap also has !important utilities with the same names as Tailwind's. */
.app-ui.app-ui,
.app-ui.app-ui * {
  all: revert-layer;
}

.app-ui.app-ui:is(.bg-primary, .border, .border-2, .gap-2, .gap-4, .p-3, .p-4, .shadow-lg),
.app-ui.app-ui :is(.bg-primary, .border, .border-2, .gap-2, .gap-4, .p-3, .p-4, .shadow-lg) {
  background-color: revert-layer !important;
  border-width: revert-layer !important;
  border-style: revert-layer !important;
  border-color: revert-layer !important;
  gap: revert-layer !important;
  padding: revert-layer !important;
  box-shadow: revert-layer !important;
}

/* Dialogs open above the fixed site header (z-index 999). */
.app-ui.app-ui[data-slot="dialog-content"],
[data-slot="dialog-overlay"] {
  z-index: 1000;
}