/* =========================================================================
   SoftCircles — Home page visual refresh
   Scope: content areas of index.html only (hero, trusted-by, case studies,
   "who we are" / accordion, stats, testimonials, blog cards, footer CTA).
   Nothing here touches markup, links, or navigation — pure presentational
   layer that sits on top of assets/css/app.min-v=13.css.
   ========================================================================= */

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

:root {
  --sc-teal: #008066;
  --sc-teal-dark: #045c48;
  --sc-dark: #1c252b;
  --sc-yellow: #fec527;
  --sc-blue: #9dceca;
  --sc-pink: #fea388;
  --sc-gray: #eceded;
  --sc-quote-bg: #f6f5f4;
  --sc-shadow-sm: 0 6px 20px rgba(28, 37, 43, 0.06);
  --sc-shadow-md: 0 14px 40px rgba(28, 37, 43, 0.12);
  --sc-shadow-lg: 0 24px 60px rgba(28, 37, 43, 0.16);
  --sc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Exact values pulled from the Figma dev-mode export */
  --sc-brand-blue: #3aadd9;
  --sc-border: #e7e8ec;
  --sc-ink: #0e0e12;
  --sc-text-muted: #4b4d57;
  --sc-star: #f4b335;
  --sc-tag-blue: #e3f5fb;
  --sc-tag-lavender: #eaedff;
  --sc-mint: #e8fffa;
  --sc-mint-pill: #cdf5ed;
  --sc-verified-bg: #e5fffe;
  --sc-band-1: #f9f9f9;
  --sc-band-2: #f4f5f7;
  --sc-band-3: #f3f3f3;
  --sc-btn-fill: #f5f6f7;
  --sc-green-bright: #12b76a;
  --sc-font-body: "Inter", "Poppins", sans-serif;
}

/* Prevent the horizontal scrollbar that full-bleed sections (e.g. the
   trusted-by band) can introduce when their 100vw width slightly exceeds
   the visible viewport (scrollbar-width rounding). */
body {
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--sc-teal);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
main .container[data-background-change="#fff"] {
  position: relative;
}

.main-header {
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
}

.main-header b {
  background: linear-gradient(100deg, var(--sc-teal) 0%, #04a37f 55%, var(--sc-teal-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--sc-teal);
}

.btn {
  transition:
    transform 0.28s var(--sc-ease),
    box-shadow 0.28s var(--sc-ease),
    background-color 0.2s ease,
    color 0.2s ease;
}

.btn.btn-warning,
.btn.btn-dark,
.btn.btn-outline-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn.btn-warning::after,
.btn.btn-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--sc-ease);
}

.btn.btn-warning:hover,
.btn.btn-dark:hover,
.btn.btn-outline-dark:hover {
  transform: translateY(-3px);
  box-shadow: var(--sc-shadow-md);
}

.btn.btn-warning:hover::after,
.btn.btn-dark:hover::after {
  transform: translateX(120%);
}

.btn.btn-warning:active,
.btn.btn-dark:active,
.btn.btn-outline-dark:active {
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Trusted-by band (two-column, divided)
   ------------------------------------------------------------------------- */
.sc-trustband {
  background: var(--sc-band-1);
  padding: 34px 0;
  /* Full-bleed: break out of the (narrower than viewport) page container
     so the band's background reaches both screen edges, while the
     nested .container inside keeps the text/logos aligned with the
     rest of the page content. */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sc-trustband-col {
  padding: 6px 24px;
}

.sc-trustband-divider {
  border-left: 1px solid rgba(28, 37, 43, 0.12);
}

.sc-trustband-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #70747a;
  margin-bottom: 16px;
}

.sc-trustband-label b {
  color: var(--sc-dark);
}

.sc-trustband-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.sc-trustband-logos img {
  filter: grayscale(0) opacity(1);
  transition: filter 0.3s ease, transform 0.3s var(--sc-ease);
}

.sc-trustband-logos img:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .sc-trustband-divider {
    border-left: none;
    border-top: 1px solid rgba(28, 37, 43, 0.12);
    margin-top: 20px;
    padding-top: 20px;
  }
}

/* -------------------------------------------------------------------------
   Trust-band logo carousel (mobile/tablet only)
   Desktop keeps the original static, wrapping row exactly as-is. Below
   768px each logo row becomes a seamless auto-scrolling strip instead of
   wrapping to multiple lines — the row's content is duplicated once (the
   second copy is `aria-hidden`, screen readers only see the real one) so
   the endless translateX(-50%) loop never shows a visible seam.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sc-trustband-scroller {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }

  .sc-trustband-track {
    display: flex;
    width: max-content;
    animation: sc-trustband-marquee 16s linear infinite;
  }

  .sc-trustband-scroller:hover .sc-trustband-track {
    animation-play-state: paused;
  }

  .sc-trustband-track .sc-trustband-logos {
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding-right: 26px;
  }

  .sc-trustband-track .sc-trustband-logos-dup {
    display: flex;
  }
}

.sc-trustband-track .sc-trustband-logos-dup {
  display: none;
}

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

/* -------------------------------------------------------------------------
   Case study feature cards (SPEDPro / Real Madrid / Abloh)
   ------------------------------------------------------------------------- */
.zoom-img.color-reveal,
.zoom-img .color-reveal {
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow 0.4s var(--sc-ease), transform 0.4s var(--sc-ease);
}

a.link-article {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.link-article:hover .color-reveal,
a.link-article:hover .zoom-img.color-reveal {
  box-shadow: var(--sc-shadow-lg);
  transform: translateY(-6px);
}

a.link-article .color-reveal::after {
  content: "\2197";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--sc-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transform: translate(8px, 8px) scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s var(--sc-ease);
  z-index: 101;
}

a.link-article:hover .color-reveal::after {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

a.link-article > strong {
  display: inline-block;
  margin-top: 18px;
  font-size: 1.05rem;
  transition: color 0.25s ease, transform 0.25s var(--sc-ease);
}

a.link-article:hover > strong {
  color: var(--sc-teal);
  transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   Section headings — quiet swipe-in underline on the bold word
   ------------------------------------------------------------------------- */
main h2 b,
main h3 b {
  position: relative;
  display: inline-block;
}

main h2 b::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sc-teal), var(--sc-yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--sc-ease);
}

main h2.sc-in-view b::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   Services accordion ("positions")
   ------------------------------------------------------------------------- */
.positions {
  background: transparent;
  box-shadow: none;
}

.position {
  border-bottom: 1px solid rgba(28, 37, 43, 0.08);
  padding: 2px 4px;
}

.position:last-child {
  border-bottom: none;
}

.position-header h5 {
  transition: color 0.25s ease;
}

.position-header[aria-expanded="true"] h5 {
  color: var(--sc-teal);
}

.sc-explore-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  font-size: 0.85rem;
}

.position-header .plus {
  transition: transform 0.3s ease;
}

.position-content h6 {
  animation: sc-fade-in 0.5s ease both;
}

@keyframes sc-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------
   Stats intro ("Real projects. Real numbers.") + stats row
   ------------------------------------------------------------------------- */
.sc-stats-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.sc-stats-intro h2 {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.52px;
  color: var(--sc-dark);
}

.sc-stats-intro-right {
  max-width: 380px;
  padding-top: 6px;
}

.sc-stats-intro-right p {
  font-family: var(--sc-font-body);
  color: var(--sc-text-muted);
  margin-bottom: 14px;
}

.sc-link-arrow {
  display: inline-block;
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid var(--sc-ink);
  padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease, padding-right 0.25s ease;
}

.sc-link-arrow:hover {
  color: var(--sc-teal);
  border-color: var(--sc-teal);
  text-decoration: none;
  padding-right: 6px;
}

.sc-stats-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  margin-top: 40px;
}

.sc-stats-row-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px;
  border-left: 1px solid var(--sc-border);
  transition: background-color 0.3s ease;
}

.sc-stats-row-item:first-child {
  border-left: none;
  padding-left: 0;
}

.sc-stats-row-item:hover {
  background-color: rgba(0, 128, 102, 0.04);
}

.sc-stats-row-item h2 {
  font-size: 1.625rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--sc-dark);
  margin: 0;
  white-space: nowrap;
}

.sc-stats-row-item span {
  font-family: var(--sc-font-body);
  color: var(--sc-text-muted);
  font-size: 0.84rem;
}

@media (max-width: 767px) {
  .sc-stats-row {
    flex-direction: column;
  }

  .sc-stats-row-item {
    border-left: none;
    border-top: 1px solid var(--sc-border);
    /* Desktop's horizontal padding (26px 24px) exists to space items apart
       side-by-side. Stacked vertically, that left padding is what was
       throwing the numbers out of alignment: `:first-child` resets its own
       padding-left to 0 for the desktop layout, but items 2 and 3 kept the
       24px left padding meant for a side-by-side row — so $10M sat flush
       left while 200+ and 1,000,000 sat indented under it. Reset every
       item's horizontal padding here so all three numbers share one left
       edge. */
    padding-left: 0;
    padding-right: 0;
  }

  .sc-stats-row-item:first-child {
    border-top: none;
  }
}

/* -------------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------------- */
.random-quote {
  padding: 10px 0;
}

.random-quote .quote {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 46px 30px;
  border-radius: 18px;
  background: var(--sc-quote-bg);
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow 0.4s ease, transform 0.4s var(--sc-ease);
}

.random-quote .quote:hover {
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-4px);
}

.random-quote .quote::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 26px;
  font-size: 84px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--sc-teal);
  opacity: 0.25;
}

.quote-sm {
  background: transparent !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   Blog / resources cards
   ------------------------------------------------------------------------- */
.resource-item .card {
  transition: transform 0.35s var(--sc-ease);
}

.resource-item .card:hover {
  transform: translateY(-6px);
}

.badge-blog {
  display: inline-block;
  color: var(--sc-teal) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.blog-card-title {
  transition: color 0.25s ease;
}

.resource-item .card:hover .blog-card-title {
  color: var(--sc-teal);
}

/* -------------------------------------------------------------------------
   Footer CTA banner ("Where there's smoke...")
   ------------------------------------------------------------------------- */
.bg-lightblue,
.bg-orange {
  position: relative;
}

.bg-lightblue h3,
.bg-orange h3 {
  letter-spacing: -0.4px;
}

.bg-lightblue .btn.btn-dark:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.bg-orange .btn.btn-outline-dark:hover {
  background-color: var(--sc-dark);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Scroll-reveal utility (paired with home-redesign.js)
   ------------------------------------------------------------------------- */
.sc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--sc-ease), transform 0.7s var(--sc-ease);
}

.sc-reveal.sc-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  main .container[data-background-change="#fff"]::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
  }

  .sc-stats-intro h2 {
    font-size: 2rem;
  }

  .random-quote .quote {
    padding: 34px 20px;
  }
}

@media (max-width: 767px) {
  a.link-article .color-reveal::after {
    width: 36px;
    height: 36px;
    right: 12px;
    bottom: 12px;
    font-size: 16px;
  }
}

/* =========================================================================
   New Figma-aligned sections (real copy)
   ========================================================================= */

/* Trusted-by tweaks */
.sc-trust-title b {
  color: var(--sc-teal);
}

/* "Built for every stage of the journey" */
.sc-journey-band {
  background: var(--sc-gray);
  padding: 48px 40px;
}

.sc-journey-band h2 {
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 0.9;
  letter-spacing: -0.42px;
  margin-bottom: 18px;
}

.sc-journey-band > .row > .col-lg-4 > p {
  color: var(--sc-text-muted);
  font-size: 0.97rem;
  line-height: 1.65;
  max-width: 420px;
}

.sc-journey-cards {
  display: flex;
  gap: 20px;
  height: 100%;
}

.sc-journey-card-item {
  flex: 1 1 0;
  border-radius: 20px;
  padding: 24px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-journey-card-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--sc-shadow-md);
}

.sc-journey-card-item.sc-journey-light {
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.15) 0%, rgba(6, 8, 12, 0.82) 100%),
    url(../img/home/journey-startups.webp) center/cover no-repeat;
  color: #fff;
}

.sc-journey-card-item.sc-journey-dark-1 {
  background: linear-gradient(160deg, rgba(13, 42, 58, 0.55) 0%, rgba(10, 61, 51, 0.68) 60%, rgba(13, 42, 58, 0.55) 100%),
    url(../img/home/journey-scaleups.webp) center/cover no-repeat;
  color: #fff;
}

.sc-journey-card-item.sc-journey-dark-2 {
  background: linear-gradient(160deg, rgba(5, 7, 15, 0.55) 0%, rgba(11, 26, 51, 0.68) 55%, rgba(4, 18, 31, 0.55) 100%),
    url(../img/home/journey-smbs.webp) center/cover no-repeat;
  color: #fff;
}

.sc-journey-card-item.sc-journey-dark-1::after,
.sc-journey-card-item.sc-journey-dark-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 80%, rgba(0, 128, 102, 0.35), transparent 60%);
  pointer-events: none;
}

.sc-journey-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  color: var(--sc-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.sc-journey-card-item h5 {
  font-weight: 700;
  margin-top: auto;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Description text is hidden by default — only the icon (top) and the
   heading (pinned to the bottom) show. Hovering reveals the paragraph
   in the space between them, matching the industry-card interaction. */
.sc-journey-card-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
}

.sc-journey-card-item:hover p {
  opacity: 1;
  max-height: 160px;
  margin-bottom: 14px;
}

@media (max-width: 991px) {
  .sc-journey-band {
    padding: 30px 22px;
  }

  .sc-journey-band h2 {
    font-size: 2.4rem;
  }

  .sc-journey-cards {
    flex-direction: column;
  }

  .sc-journey-card-item {
    min-height: 260px;
  }

  /* Touch devices have no :hover, so the desktop hover-reveal above would
     leave the paragraph permanently invisible — show it by default. */
  .sc-journey-card-item h5 {
    margin-top: 0;
  }

  .sc-journey-card-item p {
    opacity: 1;
    max-height: none;
    margin-bottom: 14px;
  }
}

@media (max-width: 767px) {
  .sc-journey-band h2 {
    font-size: 1.9rem;
    line-height: 1.05;
  }
}

/* Case study badges (SPEDPro tags/rating) */
.sc-case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.sc-case-meta .sc-case-stat {
  font-family: var(--sc-font-body);
  font-size: 0.9rem;
  color: var(--sc-text-muted);
  flex-basis: 100%;
  margin-bottom: 4px;
}

.sc-case-meta .sc-tag {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #ebebeb;
  background: transparent;
  font-family: var(--sc-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* First tag (EdTech) is filled, per Figma — the rest stay outlined/muted */
.sc-case-meta .sc-tag:first-of-type {
  border-color: transparent;
  background: var(--sc-tag-lavender);
  color: var(--sc-dark);
}

.sc-case-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  margin-top: 6px;
}

.sc-case-meta .sc-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sc-mint-pill);
  font-family: var(--sc-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--sc-dark);
}

.sc-case-meta .sc-rating .fa {
  color: var(--sc-teal);
  font-size: 0.8rem;
}

.sc-case-meta .sc-case-stars .fa {
  color: var(--sc-star);
  font-size: 0.85rem;
  margin-right: 2px;
}

/* Title row: SPEDPro heading (left) + "View case study" link (right) */
.sc-case-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 18px;
}

a.sc-case-title {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: 1.05rem;
  transition: color 0.25s ease, transform 0.25s var(--sc-ease);
}

a.sc-case-title:hover {
  color: var(--sc-teal);
  transform: translateX(4px);
}

a.sc-case-view-link {
  flex-shrink: 0;
  display: inline-block;
  font-family: var(--sc-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--sc-teal);
  border: 1.5px solid var(--sc-teal);
  padding: 0.55rem 1.3rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.25s var(--sc-ease), box-shadow 0.25s ease;
}

a.sc-case-view-link:hover {
  color: #fff;
  background-color: var(--sc-teal-dark);
  border-color: var(--sc-teal-dark);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--sc-shadow-md);
}

/* Hiring / staff-aug cards ("Skip the hiring bottleneck") */
.sc-hiring-card {
  border-radius: 18px;
  padding: 14px 22px;
  height: 100%;
  box-shadow: 0px 20px 40px -20px rgba(14, 14, 18, 0.25);
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease);
}

.sc-hiring-card:hover {
  transform: translateY(-6px);
}

.sc-hiring-card.sc-hiring-dark {
  background: var(--sc-ink);
  color: #fff;
}

.sc-hiring-card.sc-hiring-light {
  background: #fff;
  border: 1px solid var(--sc-border);
}

.sc-hiring-card h5 {
  font-weight: 700;
  letter-spacing: -0.15px;
  margin-bottom: 2px;
}

.sc-hiring-card .sc-hiring-exp {
  font-family: var(--sc-font-body);
  font-size: 0.75rem;
  opacity: 0.65;
  margin-bottom: 6px;
  display: block;
}

.sc-hiring-card.sc-hiring-light .sc-hiring-exp {
  color: var(--sc-text-muted);
  opacity: 1;
}

.sc-hiring-card .sc-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sc-font-body);
  font-size: 0.69rem;
  font-weight: 600;
  margin: 0 6px 6px 0;
}

.sc-hiring-card.sc-hiring-dark .sc-tag {
  background: var(--sc-tag-blue);
  color: var(--sc-ink);
}

.sc-hiring-card.sc-hiring-light .sc-tag {
  background: var(--sc-tag-blue);
  color: var(--sc-ink);
}

.sc-hiring-card .sc-available {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sc-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sc-green-bright);
  margin-top: 4px;
}

.sc-hiring-card .sc-available .fa {
  color: var(--sc-green-bright);
  font-size: 0.5rem;
}

/* Blue banner card wrapping the "Skip the hiring bottleneck" copy */
.sc-hiring-banner {
  background: var(--sc-brand-blue);
  color: #fff;
  padding: 44px 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sc-hiring-banner h2,
.sc-hiring-banner h3 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125;
  letter-spacing: -0.32px;
  color: #fff;
  margin-bottom: 16px;
}

.sc-hiring-banner p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

/* Stacked hiring cards, with a peeking third card for visual depth.
   Padded and centered within its column so the cards sit inset from both
   the blue banner and the outer edge, instead of touching either. */
.sc-hiring-stack {
  position: relative;
  padding: 0 40px;
}

.sc-hiring-stack .row {
  position: relative;
  z-index: 2;
}

.sc-hiring-peek {
  position: relative;
  z-index: 1;
  width: 58%;
  max-width: 320px;
  margin: -30px auto 0;
  box-shadow: var(--sc-shadow-sm);
}

@media (max-width: 991px) {
  .sc-hiring-stack {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .sc-hiring-stack {
    /* The blue banner sits directly above this column (zero gap by
       design on desktop) and the green process card sits directly below
       — on mobile, once everything stacks into one column, that left
       both edges of the card stack touching their neighbors with no
       breathing room. Give it some vertical padding of its own. */
    padding: 24px 0;
  }

  /* The "peek" card was a desktop-only visual trick (a third card
     partially overlapping the row above it, offset with a negative
     margin, for depth). On mobile that just hid the card entirely —
     show it as a normal full-width stacked card instead, matching the
     other two. */
  .sc-hiring-peek {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
  }
}

/* 4-step process list ("How we turn ideas into shipped software") */
.sc-step-list {
  margin: 22px 0 0;
}

.sc-step-item {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(28, 37, 43, 0.08);
}

.sc-step-item:last-child {
  border-bottom: none;
}

.sc-step-num {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--sc-teal);
  font-size: 0.9rem;
  min-width: 28px;
}

.sc-step-item h5 {
  font-weight: 700;
  margin-bottom: 2px;
}

.sc-step-item p {
  color: #56595c;
  margin: 0;
  font-size: 0.92rem;
}

/* Timeline variant: bordered card rows with a connecting line and a circular number badge.
   Padded so the cards sit inset from both the outer edge and the green
   process card, instead of touching either. */
.sc-step-list-timeline {
  position: relative;
  padding: 0 40px;
}

@media (max-width: 991px) {
  .sc-step-list-timeline {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  .sc-step-list-timeline {
    padding: 0;
  }
}

.sc-step-list-timeline .sc-step-item {
  border: 1px solid rgba(28, 37, 43, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
  background: #fff;
  align-items: flex-start;
}

.sc-step-list-timeline .sc-step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 33px;
  width: 1px;
  height: 22px;
  background: rgba(28, 37, 43, 0.15);
  transform: translateY(100%);
}

.sc-step-list-timeline .sc-step-num {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--sc-mint);
  color: var(--sc-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.sc-step-list-timeline .sc-step-item {
  border-color: var(--sc-border);
}

.sc-step-list-timeline .sc-step-item:not(:last-child)::after {
  background: var(--sc-border);
}

.sc-step-item h5 {
  font-family: var(--sc-font-body);
  font-weight: 600;
  color: var(--sc-ink);
}

.sc-step-item p {
  font-family: var(--sc-font-body);
  color: var(--sc-text-muted);
}

/* Light CTA banner (Launch Your Next AI Project) */
.sc-cta-light {
  background: linear-gradient(135deg, #f4f4f4 0%, #eef4f2 100%);
  padding: 46px 40px;
}

.sc-cta-light h2 {
  margin-bottom: 12px;
}

.sc-cta-light p {
  color: #56595c;
  max-width: 520px;
  margin-bottom: 20px;
}

.sc-cta-light .sc-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

.sc-cta-light .sc-trust-badges span {
  font-size: 0.82rem;
  color: var(--sc-dark);
  font-weight: 500;
}

.sc-cta-light .sc-trust-badges .fa {
  color: var(--sc-teal);
  margin-right: 6px;
}

/* Section heading + left/right scroll-nav buttons, shared by horizontal
   scrollers (industry cards, etc.) */
.sc-section-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}

.sc-scroll-nav {
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.sc-scroll-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(27, 35, 46, 0.18);
  background: #fff;
  color: var(--sc-dark);
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.sc-scroll-nav .sc-scroll-btn {
  display: flex;
}

.sc-scroll-btn:hover {
  background: var(--sc-dark);
  color: #fff;
  border-color: var(--sc-dark);
}

.sc-scroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Horizontal single-row scroller for industry cards */
.sc-industry-scroller {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* extra top padding so the hover lift (translateY) has room and the
     card's rounded top corners don't get clipped by the scroller */
  padding: 14px 4px 18px;
  -webkit-overflow-scrolling: touch;
  /* Hide the visible scrollbar/slider — dragging still works, and the
     left/right nav buttons cover the rest. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge / IE */
}

.sc-industry-scroller::-webkit-scrollbar {
  display: none; /* Chrome, Safari, new Edge */
  height: 0;
}

.sc-industry-scroller .sc-industry-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  .sc-industry-scroller .sc-industry-card {
    flex-basis: 260px;
  }
}

/* Industry / domain-expertise cards */
.sc-industry-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 28px;
  min-height: 340px;
  background: #f4f4f4;
  color: var(--sc-dark);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--sc-ease), box-shadow 0.35s var(--sc-ease),
    background-color 0.35s ease, color 0.35s ease;
  box-shadow: var(--sc-shadow-sm);
}

.sc-industry-card:hover {
  background: #000;
  color: #fff;
  transform: translateY(-6px);
  box-shadow: var(--sc-shadow-md);
  text-decoration: none;
}

.sc-industry-card .sc-eyebrow {
  display: block;
  font-family: var(--sc-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 34px;
}

.sc-industry-card h4 {
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.32px;
  /* pinned to the bottom of the card by default; hovering reveals the
     paragraph above it, which pushes the heading upward */
  margin-top: auto;
  margin-bottom: 0;
}

.sc-industry-card p {
  font-family: var(--sc-font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
}

.sc-industry-card:hover p {
  opacity: 0.85;
  max-height: 140px;
  margin-bottom: 12px;
}

.sc-industry-card .fa {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(27, 35, 46, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.3s var(--sc-ease), background-color 0.3s ease, border-color 0.3s ease;
}

.sc-industry-card:hover .fa {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translate(3px, -3px);
}

/* Touch devices have no :hover, so the desktop hover-reveal above would
   leave the paragraph permanently invisible — show it by default and let
   the card grow past its min-height instead of relying on the hover
   trigger. */
@media (max-width: 991px) {
  .sc-industry-card h4 {
    margin-top: 0;
  }

  .sc-industry-card p {
    opacity: 1;
    max-height: none;
    margin-bottom: 12px;
  }
}

/* Testimonial grid (Our Clients' Success Stories) — light band contained to
   the same width as the rest of the page content (not full-bleed), 3-column
   staggered masonry, per Figma dev-mode export. */
.sc-testimonials-band {
  background: var(--sc-band-3);
  padding: 48px 40px;
}

.sc-testimonial-kicker {
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sc-text-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sc-testimonials-band h2 {
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -0.4px;
}

@media (max-width: 767px) {
  .sc-testimonials-band h2 {
    font-size: 2.1rem;
  }
}

@media (max-width: 991px) {
  .sc-testimonials-band {
    padding: 34px 22px;
  }
}

.sc-testimonial-grid {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.sc-testimonial-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sc-testimonial-col-offset {
  padding-top: 56px;
}

.sc-testimonial-grid .random-quote {
  display: block !important;
  margin: 0 !important;
}

.sc-testimonial-grid .quote {
  height: auto;
  max-width: none;
  margin: 0;
  padding: 28px 26px;
  text-align: left;
  background: #fff;
}

.sc-testimonial-grid .quote::before {
  left: auto;
  right: 26px;
}

.sc-testimonial-grid .quote-sm {
  text-align: left !important;
  font-size: 1.05rem !important;
  padding: 0 !important;
}

.sc-testimonial-grid .quote .d-flex {
  justify-content: flex-start !important;
  padding: 18px 0 0 !important;
}

.sc-quote-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sc-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sc-verified-bg);
  font-family: var(--sc-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--sc-dark);
  margin-bottom: 0;
}

.sc-verified-badge .fa {
  color: var(--sc-teal);
}

.sc-quote-stars .fa {
  color: var(--sc-star);
  font-size: 0.8rem;
  margin-right: 1px;
}

/* Dark video-testimonial placeholder cards */
.sc-video-card {
  position: relative;
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(150deg, #232a46 0%, #14172a 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 26px;
}

.sc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sc-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(44, 75, 255, 0.18);
}

.sc-video-play .fa {
  color: #fff;
  font-size: 0.95rem;
  margin-left: 2px;
}

.sc-video-caption {
  position: relative;
  z-index: 1;
}

.sc-video-caption .text-18,
.sc-video-caption .text-14 {
  color: #fff;
}

@media (max-width: 767px) {
  .sc-testimonial-grid {
    flex-direction: column;
  }

  .sc-testimonial-col-offset {
    padding-top: 0;
  }
}

/* Blog section header row */
.sc-blog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.sc-blog-header p {
  margin: 0;
  max-width: 560px;
}

/* Green process card ("How we turn ideas into shipped software") */
.sc-process-card {
  background: var(--sc-teal);
  padding: 40px 34px;
  color: #fff;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sc-process-card h3,
.sc-process-card h2 {
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125;
  letter-spacing: -0.32px;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.sc-process-card p {
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.sc-process-card .btn {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .sc-cta-light,
  .sc-process-card {
    padding: 34px 22px;
  }
}

/* =========================================================================
   Button parity pass — exact Figma button treatment
   (white-fill / black-border uppercase pills, and the one filled-gray
   secondary button). Scoped to `main` so nothing outside the home page
   content area is touched.
   ========================================================================= */

/* White pill, black border, uppercase 15px/600 — the repeated secondary CTA
   used across "Explore the service", "See more/past projects",
   "Hire AI Experts", "Read our blogs". */
main .btn.btn-outline-dark {
  background: #fff;
  border: 1px solid var(--sc-ink);
  border-radius: 9px;
  color: var(--sc-ink);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

main .btn.btn-outline-dark:hover {
  background: var(--sc-ink);
  border-color: var(--sc-ink);
  color: #fff;
}

/* White pill on a colored/dark card background — "Get a Free Quote",
   "Talk to an AI Specialist". */
main .sc-hiring-banner .btn.btn-light,
main .sc-process-card .btn.btn-light {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 9px;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

main .sc-hiring-banner .btn.btn-light:hover,
main .sc-process-card .btn.btn-light:hover {
  background: transparent;
  color: #fff;
}

/* Filled light-gray secondary button — "Connect with our experts" is the
   one CTA that isn't an uppercase pill in the Figma spec. */
main .sc-journey-band .btn.btn-outline-dark {
  background: var(--sc-btn-fill);
  border: 1px solid #000;
  border-radius: 10px;
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 0.906rem;
  text-transform: none;
  letter-spacing: normal;
}

main .sc-journey-band .btn.btn-outline-dark:hover {
  background: #000;
  color: #fff;
}

/* Primary teal CTA ("Schedule a Free Consultation") — confirm exact fill +
   pill radius + uppercase treatment to match every other button on the page. */
main .btn.btn-warning {
  background: var(--sc-teal);
  border-color: var(--sc-teal);
  border-radius: 9px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

main .btn.btn-warning:hover {
  background: var(--sc-teal-dark);
  border-color: var(--sc-teal-dark);
}

main .sc-explore-btn {
  padding: 8px 20px;
  font-size: 0.82rem;
}

/* =========================================================================
   Section spacing — a little vertical breathing room between every
   top-level content block on the home page. CSS-only, targets each
   section by its exact direct-child relationship to its container so
   nothing inside a section (cards, rows of columns, the footer CTA
   banner) is affected.
   ========================================================================= */
:root {
  --sc-section-gap: 32px;
}

main > .container > section.row,
main > .container > .sc-trustband,
main > .container > .row,
main > .container > .sc-journey-band,
main > .container > .sc-stats-intro,
main > .container > .sc-stats-row,
main > .container > .sc-testimonials-band,
main > .container > .sc-blog-header,
main > .container > .container > .row,
main > .container > .container > .sc-cta-light {
  margin-top: var(--sc-section-gap);
  margin-bottom: var(--sc-section-gap);
}

/* The hiring row (blue banner + job cards) and the process row (steps +
   green card) sit directly on top of one another with zero gap, so the
   blue banner's bottom-right corner touches the green card's top-left
   corner — overrides the generic section-gap margin above. */
main > .container > .sc-hiring-row {
  margin-bottom: 0;
}

main > .container > .sc-process-row {
  margin-top: 0;
}

/* Below the lg breakpoint the two columns stack — DOM order puts the
   checklist (steps) above the green "From napkin sketch to app store"
   card. On mobile it should read the other way: the green summary card
   first, the supporting checklist underneath it. `.row` is already
   `display:flex` (Bootstrap), so a plain `order` swap reverses the visual
   stacking order without touching the markup. */
@media (max-width: 991px) {
  .sc-process-row > .col-lg-6:first-child {
    order: 2;
  }

  .sc-process-row > .col-lg-6:last-child {
    order: 1;
  }
}

/* Hero sits right under the nav — keep it snug up top, just add room below it. */
main > .container > section.row {
  margin-top: 0;
}

/* The blue/yellow footer CTA banner is a full-bleed block that sits directly
   under <main>, outside any .container — give it room from the section above. */
main > div[style*="linear-gradient"] {
  margin-top: var(--sc-section-gap);
}

@media (max-width: 767px) {
  :root {
    --sc-section-gap: 20px;
  }
}

/* =========================================================================
   Contact CTA — "Where there's smoke..." (blue / light-gray split)
   Shared by index.html and services.html — both link this stylesheet.
   ========================================================================= */
.sc-svc-contact {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Root cause of a height mismatch: Bootstrap's `.row` is display:flex,
   which SHOULD stretch both columns to equal height by default — but that
   only works reliably when both columns are plain flex items with no
   competing height rules. Rather than fight flex-stretch edge cases,
   force the row onto CSS Grid instead: grid items stretch to fill their
   row's height unconditionally, so the blue column and the form column
   are guaranteed to be exactly the same height, no matter which one has
   more content. */
.sc-svc-contact .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* The gap-in-the-middle-with-half-width-columns bug: the columns still
   carry Bootstrap's ".col-lg-6" class, which sets `max-width: 50%` (and a
   flex-basis) meant for a *flex* row. Percentage max-width on a grid item
   resolves against its own grid cell — which is already 50% of the row —
   so 50% of 50% left each column at just 25% of the row, with a blank gap
   where the unused space collapsed into the middle. Neutralize those
   leftover flex-column sizing properties now that the parent is a grid. */
.sc-svc-contact .row > [class*="col-"] {
  max-width: 100%;
  width: 100%;
  flex: none;
}

@media (max-width: 991px) {
  .sc-svc-contact .row {
    grid-template-columns: 1fr;
  }
}

.sc-svc-contact-left {
  background: var(--sc-brand-blue, #3aadd9);
  color: #fff;
  padding: 70px 50px;
  display: flex;
  /* Center the whole text block as a unit — both axes — while the text
     inside that block stays left-aligned (so the heading, paragraph, and
     button all share the same left edge, instead of each line centering
     independently with ragged edges). */
  align-items: center;
  justify-content: center;
}

.sc-svc-contact-inner {
  max-width: 460px;
  width: 100%;
  text-align: left;
}

.sc-svc-contact-left h2 {
  color: var(--sc-dark);
  font-weight: 700;
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.sc-svc-contact-left p {
  color: rgba(14, 14, 18, 0.72);
  margin-bottom: 28px;
}

@media (max-width: 991px) {
  .sc-svc-contact-left {
    padding: 50px 26px;
  }

  .sc-svc-contact-left h2 {
    font-size: 2.1rem;
  }
}

/* -------------------------------------------------------------------------
   Sticky left column — one side stays in place while the other side
   scrolls past it. Shared by the "What you get, beyond the build" section
   on services.html and the "It's not rocket science" section on index.html.
   ------------------------------------------------------------------------- */
.sc-value-sticky {
  position: sticky;
  top: 170px;
}

@media (max-width: 991px) {
  .sc-value-sticky {
    position: static;
  }
}

/* "Why SoftCircles" / "Our Processes" button pair. Previously the second
   button used an inline `margin-left: 30px` to space it from the first —
   fine side-by-side on desktop, but once the two buttons wrap onto
   separate lines on a narrow screen, that left margin just shifted the
   second button in from the shared left edge instead of the first. A flex
   row with `gap` spaces them consistently whether they sit side-by-side or
   wrap, so both always share the same left edge. */
.sc-value-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 48px;
}