/* ============================================================
   BackTheme — Sections
   Load order: 1 tokens > 2 base > 3 components > 4 mockups > [5 sections]

   One block per page section, in roughly the order a visitor meets
   them on the homepage.

   Contents
     1. Hero                  9. Process rail
     2. Page hero (inner)    10. Industries
     3. Split / panel        11. Portfolio
     4. Services bento       12. Testimonials
     5. Products stage       13. FAQ
     6. Product feature      14. CTA band
     7. Product cards        15. Contact
     8. Why choose           16. Blog / prose
                             17. Expertise (services page)
                             18. Phone overrides  <- MUST STAY LAST

   CASCADE WARNING
   The phone-override block at the bottom of this file has the same
   specificity as the component rules above it, so it wins only by
   coming later. Do not move it, and do not add card padding rules
   after it.
   ============================================================ */

/* ------------------------------------------------------------
   Hero — left-aligned, asymmetric, anchored by a product visual
   ------------------------------------------------------------ */

.backtheme-hero {
  position: relative;
  padding-top: calc(var(--backtheme-header-h) + clamp(2.5rem, 1.8rem + 3.5vw, 5rem));
  padding-bottom: clamp(3rem, 2.2rem + 4vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.backtheme-hero__glow-1 {
  top: -30%;
  left: -10%;
  width: min(820px, 120vw);
  aspect-ratio: 1.2;
}

.backtheme-hero__glow-2 {
  top: -5%;
  right: -20%;
  width: min(700px, 100vw);
  aspect-ratio: 1;
  opacity: calc(var(--backtheme-glow-opacity) * .8);
}

.backtheme-hero__grid {
  position: relative;
  z-index: var(--backtheme-z-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--backtheme-space-2xl);
  align-items: center;
}

@media (min-width: 1000px) {
  /* The visual gets the slightly wider track. A headline that out-weighs
     the product shot makes the shot look like an afterthought. */
  .backtheme-hero__grid { grid-template-columns: 1fr 1.08fr; gap: var(--backtheme-space-2xl); }
}

.backtheme-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--backtheme-space-m);
}

/* Deliberately one notch below --backtheme-step-6. At display sizes the headline
   grew taller than the whole product visual beside it, which reads as
   two competing focal points instead of one. */
.backtheme-hero__title {
  font-size: clamp(2.25rem, 1.5rem + 3.3vw, 3.75rem);
  max-width: 19ch;
}

.backtheme-hero__description {
  font-size: var(--backtheme-step-0);
  line-height: var(--backtheme-lh-relaxed);
  color: var(--backtheme-fg-muted);
  max-width: 52ch;
}

.backtheme-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--backtheme-space-xs);
  margin-top: var(--backtheme-space-3xs);
}

@media (max-width: 420px) {
  .backtheme-hero__actions { flex-direction: column; align-self: stretch; }
  .backtheme-hero__actions .backtheme-button { width: 100%; }
}

.backtheme-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--backtheme-space-2xs);
  margin-top: var(--backtheme-space-2xs);
  padding-top: var(--backtheme-space-m);
  border-top: 1px solid var(--backtheme-line);
  width: 100%;
}

/* ---- Visual column ----
   A web app window with an Android phone overlapping its corner: the
   two things BackTheme actually builds, in one frame, plus a note that
   the products are its own. */
.backtheme-hero__visual { position: relative; padding-bottom: var(--backtheme-space-m); }

.backtheme-hero__stage { position: relative; }

@media (min-width: 1000px) {
  .backtheme-hero__visual { padding-left: var(--backtheme-space-l); }
  .backtheme-hero__stage .backtheme-mock__body { min-height: 348px; }
}

/* The phone straddles the window's lower-left corner: far enough out
   that it reads as a second device, not as an overlay sitting on the
   dashboard's sidebar. */
.backtheme-hero__phone {
  position: absolute;
  left: -40px;
  bottom: -42px;
  z-index: 4;
  width: 116px;
  filter: drop-shadow(0 22px 34px light-dark(rgba(10,20,40,.22), rgba(0,0,0,.6)));
}

/* Stubbier than the full-size product phones — at this scale a 9/18
   body leaves a dead gap between the content and the tab bar. */
.backtheme-hero__phone .backtheme-phone { width: 100%; padding: 5px; border-radius: 22px; aspect-ratio: 9 / 16.2; }
.backtheme-hero__phone .backtheme-phone__screen { border-radius: 17px; padding: 17px 8px 8px; gap: 6px; }
.backtheme-hero__phone .backtheme-phone__notch { width: 32px; height: 4px; top: 5px; }
.backtheme-hero__phone .backtheme-phone__hero { padding: 7px; gap: 5px; border-radius: 8px; }
.backtheme-hero__phone .backtheme-phone__row { padding: 6px; gap: 6px; border-radius: 6px; }
.backtheme-hero__phone .backtheme-phone__row i { width: 13px; height: 13px; border-radius: 4px; }

/* Both cards straddle an edge rather than floating over the content —
   sitting one on the chart made the panel look cluttered. */
.backtheme-hero__float-1 { top: -18px; left: 44px; }
.backtheme-hero__float-2 { bottom: -22px; right: 34px; animation-delay: -2.5s; }

@media (max-width: 860px) {
  .backtheme-hero__float-1 { top: -14px; left: 10px; }
  .backtheme-hero__float-2 { bottom: -16px; right: 10px; }
  .backtheme-hero__phone { width: 98px; left: -18px; bottom: -28px; }
}

/* Below this the composition is more clutter than signal. */
@media (max-width: 560px) {
  .backtheme-hero__phone { display: none; }
  .backtheme-hero__float-2 { bottom: 12px; right: 4px; }
}

/* ------------------------------------------------------------
   Page hero (inner pages)
   ------------------------------------------------------------ */

.backtheme-page-hero {
  position: relative;
  padding-top: calc(var(--backtheme-header-h) + clamp(2.5rem, 2rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--backtheme-line);
  isolation: isolate;
}

.backtheme-page-hero__glow {
  top: -40%;
  left: 12%;
  width: min(760px, 120vw);
  aspect-ratio: 1.4;
}

.backtheme-page-hero__inner {
  position: relative;
  z-index: var(--backtheme-z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--backtheme-space-s);
  max-width: 62ch;
}

/* Inner pages opened with a wall of text while the homepage opened with
   a product shot. This gives them the same asymmetry. */
.backtheme-page-hero__grid {
  position: relative;
  z-index: var(--backtheme-z-raised);
  display: grid;
  gap: var(--backtheme-space-xl);
  align-items: center;
}

@media (min-width: 980px) {
  .backtheme-page-hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--backtheme-space-2xl); }
  .backtheme-page-hero__grid .backtheme-page-hero__inner { max-width: 52ch; }
}

.backtheme-page-hero__visual { position: relative; }
.backtheme-page-hero__visual .backtheme-mock { max-width: 480px; margin-inline: auto; }
.backtheme-page-hero__visual .backtheme-code { max-width: 460px; margin-inline: auto; }

@media (max-width: 979px) {
  .backtheme-page-hero__visual .backtheme-mock,
  .backtheme-page-hero__visual .backtheme-code { max-width: 420px; }
}

/* The About hero composes a window plus two floating chips, the same way
   the homepage hero does. The stage — not the window — carries the width,
   so the chips anchor to the window's real edges at every size. */
.backtheme-page-hero__stage { position: relative; max-width: 480px; margin-inline: auto; }

@media (max-width: 979px) {
  .backtheme-page-hero__stage { max-width: 420px; }
}

.backtheme-page-hero__float-1 { top: -16px; left: -12px; }
.backtheme-page-hero__float-2 { bottom: -18px; right: -8px; animation-delay: -2.5s; }

@media (max-width: 979px) {
  .backtheme-page-hero__float-1 { top: -12px; left: 0; }
  .backtheme-page-hero__float-2 { bottom: -14px; right: 0; }
}

/* Below this the two chips crowd the window rather than framing it. */
@media (max-width: 520px) {
  .backtheme-page-hero__float-2 { display: none; }
}

.backtheme-page-hero__title { font-size: var(--backtheme-step-5); }

.backtheme-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--backtheme-step--2);
  font-family: var(--backtheme-font-mono);
  color: var(--backtheme-fg-subtle);
  letter-spacing: var(--backtheme-tracking-wide);
}

.backtheme-breadcrumb a { transition: color var(--backtheme-dur-fast) var(--backtheme-ease-out); }
.backtheme-breadcrumb a:hover { color: var(--backtheme-brand-ink); }
.backtheme-breadcrumb__separator { opacity: .5; }
.backtheme-breadcrumb [aria-current] { color: var(--backtheme-fg-muted); }

/* ------------------------------------------------------------
   Split — two-column text + panel
   ------------------------------------------------------------ */

.backtheme-split { display: grid; gap: var(--backtheme-space-xl); align-items: center; }
.backtheme-split > .backtheme-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

@media (min-width: 900px) {
  .backtheme-split { grid-template-columns: 1fr 1fr; gap: var(--backtheme-space-2xl); }
  .backtheme-split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .backtheme-split--wide-right { grid-template-columns: .85fr 1.15fr; }
}

.backtheme-split__content { display: flex; flex-direction: column; gap: var(--backtheme-space-s); }

/* A step-5 heading overflows a half-width column and balances into a
   narrow ragged block. One step down reads better beside a panel. */
.backtheme-split__content > h2 { font-size: var(--backtheme-step-4); }
.backtheme-split__content p { color: var(--backtheme-fg-muted); line-height: var(--backtheme-lh-relaxed); max-width: 56ch; }

.backtheme-panel {
  position: relative;
  padding: var(--backtheme-space-l);
  background: linear-gradient(168deg, var(--backtheme-surface-2) 0%, var(--backtheme-surface-1) 100%);
  border: 1px solid var(--backtheme-line);
  border-radius: var(--backtheme-r-xl);
  overflow: hidden;
  isolation: isolate;
}

.backtheme-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--backtheme-brand-500), transparent);
  opacity: .7;
}

.backtheme-panel__glow { bottom: -50%; right: -30%; width: 90%; aspect-ratio: 1; }

.backtheme-panel__label {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  letter-spacing: var(--backtheme-tracking-widest);
  text-transform: uppercase;
  color: var(--backtheme-fg-subtle);
  margin-bottom: var(--backtheme-space-m);
}

/* ------------------------------------------------------------
   Services — bento grid
   ------------------------------------------------------------ */

.backtheme-services-grid { display: grid; gap: var(--backtheme-space-s); grid-template-columns: 1fr; }

@media (min-width: 760px) {
  .backtheme-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backtheme-services-grid > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
  .backtheme-services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .backtheme-services-grid > :nth-child(1) { grid-column: span 6; }
  .backtheme-services-grid > :nth-child(2) { grid-column: span 3; }
  .backtheme-services-grid > :nth-child(3) { grid-column: span 3; }
  .backtheme-services-grid > :nth-child(4) { grid-column: span 3; }
  .backtheme-services-grid > :nth-child(5) { grid-column: span 3; }
}

.backtheme-service-card { padding: var(--backtheme-space-l); gap: var(--backtheme-space-m); }

.backtheme-service-card__head { display: flex; align-items: flex-start; gap: var(--backtheme-space-s); }

/* On a phone a 54px tile beside the title leaves it ~185px to wrap in,
   which is what made these cards feel cramped. Stacking gives the
   heading the full column and costs one row of height. */
@media (max-width: 599px) {
  .backtheme-service-card { padding: var(--backtheme-space-m); gap: var(--backtheme-space-s); }
  .backtheme-service-card__head { flex-direction: column; gap: var(--backtheme-space-s); }
  .backtheme-service-card .backtheme-card__title { font-size: var(--backtheme-step-1); }
  .backtheme-service-card__number { top: var(--backtheme-space-s); right: var(--backtheme-space-s); }
}
.backtheme-service-card__heading { display: flex; flex-direction: column; gap: 4px; }

.backtheme-service-card__number {
  position: absolute;
  top: var(--backtheme-space-m);
  right: var(--backtheme-space-m);
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--1);
  color: var(--backtheme-fg-subtle);
  opacity: .55;
  letter-spacing: var(--backtheme-tracking-wide);
  z-index: 3;
}

/* The wide first card runs copy + list + a code window across three tracks. */
@media (min-width: 1080px) {
  .backtheme-service-card--wide {
    display: grid;
    grid-template-columns: 1fr 1fr .9fr;
    gap: var(--backtheme-space-xl);
    align-items: start;
  }
  .backtheme-service-card--wide .backtheme-service-card__main { display: flex; flex-direction: column; gap: var(--backtheme-space-s); }
  .backtheme-service-card--wide .backtheme-service-card__aside { padding-top: 4px; }
  .backtheme-service-card--wide .backtheme-service-card__visual { padding-top: 4px; align-self: stretch; }
  .backtheme-service-card--wide { align-items: stretch; }
  .backtheme-service-card--wide .backtheme-service-card__main,
  .backtheme-service-card--wide .backtheme-service-card__aside { align-self: start; }
}

@media (max-width: 1079px) {
  .backtheme-service-card__visual { display: none; }
}

.backtheme-service-card__aside-label {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  letter-spacing: var(--backtheme-tracking-widest);
  text-transform: uppercase;
  color: var(--backtheme-fg-subtle);
  margin-bottom: var(--backtheme-space-xs);
}

/* ------------------------------------------------------------
   Products

   Media first, then title, then copy. The old cards led with a wall
   of text and squeezed the device shot into a side column, which made
   every card read as a spec sheet. Now each card opens with a stage
   the product sits in, and the copy underneath stays short.
   ------------------------------------------------------------ */

/* Shared stage: a tinted panel the device bleeds out of. */
.backtheme-stage {
  position: relative;
  display: grid;
  place-items: end center;
  padding: var(--backtheme-space-l) var(--backtheme-space-m) 0;
  background: var(--backtheme-surface-2);
  border-bottom: 1px solid var(--backtheme-line);
  overflow: hidden;
  isolation: isolate;
}

.backtheme-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 78% 62% at 50% 0%,
      light-dark(rgba(0,113,189,.12), rgba(0,163,255,.16)) 0%, transparent 72%);
}

/* A faint grid, cropped to the stage, so the panel is not a flat fill. */
.backtheme-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--backtheme-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--backtheme-grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 20%, transparent 75%);
}

/* ---- Flagship: BackTheme Marketplace ---- */
.backtheme-product-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--backtheme-surface-1);
  border: 1px solid var(--backtheme-line);
  border-radius: var(--backtheme-r-2xl);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 980px) {
  /* Two columns with the "why it matters" block spanning underneath.
     Keeping it in the copy column made that side ~900px tall against a
     ~340px window, which no amount of centring fixes. Moving it below
     balances the two columns and lets the window stretch to match. */
  .backtheme-product-feature {
    grid-template-columns: 1.02fr .98fr;
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
  }

  .backtheme-product-feature__body  { grid-column: 1; grid-row: 1; }
  .backtheme-product-feature__media { grid-column: 2; grid-row: 1; }
  .backtheme-product-feature__aside { grid-column: 1 / -1; grid-row: 2; }

  .backtheme-product-feature__media {
    margin: var(--backtheme-space-l) var(--backtheme-space-l) var(--backtheme-space-l) 0;
    border: 1px solid var(--backtheme-line);
    border-radius: var(--backtheme-r-xl);
  }
}

/* Centred, not bottom-anchored. The copy column is taller than the
   mock, and `place-items: end` left a large dead gap above it. The
   bleed-off-the-bottom treatment belongs to the stacked product
   cards, where the device drops into the content below it. */
.backtheme-product-feature__media {
  place-items: stretch;
  min-height: 0;
  padding: var(--backtheme-space-l);
}

/* The window fills its panel; its list simply runs out before the
   bottom, which is how a real app window looks. */
.backtheme-product-feature__media .backtheme-mock {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.backtheme-product-feature__media .backtheme-mock__body { flex: 1; }

.backtheme-product-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--backtheme-space-s);
  padding: var(--backtheme-space-xl) var(--backtheme-space-l);
}

@media (min-width: 980px) {
  .backtheme-product-feature__body { padding: var(--backtheme-space-2xl) var(--backtheme-space-xl); justify-content: center; }
}

.backtheme-product-feature__aside { padding: 0 var(--backtheme-space-l) var(--backtheme-space-xl); }

@media (min-width: 980px) {
  .backtheme-product-feature__aside { padding: 0 var(--backtheme-space-xl) var(--backtheme-space-2xl); }
}

.backtheme-product-feature__title { font-size: var(--backtheme-step-4); }

/* ---- The two Android products ---- */
.backtheme-product-grid { display: grid; gap: var(--backtheme-space-m); grid-template-columns: 1fr; margin-top: var(--backtheme-space-m); }

@media (min-width: 900px) { .backtheme-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.backtheme-product-card { padding: 0; gap: 0; overflow: hidden; }

.backtheme-product-card__media { min-height: 244px; }
.backtheme-product-card__media .backtheme-phone { width: 172px; margin-bottom: -46px; }

.backtheme-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--backtheme-space-s);
  padding: var(--backtheme-space-l);
  flex: 1;
}

/* flex-start, not center: when the subtitle wraps to two lines the
   48px logo was centred against a 69px block and sat ~10px low, which
   read as a misaligned icon floating below the title. */
.backtheme-product-card__head { display: flex; align-items: flex-start; gap: var(--backtheme-space-s); }
.backtheme-product-card__meta { padding-top: 2px; }
.backtheme-product-card__meta { display: flex; flex-direction: column; gap: 2px; }

/* Slot for a real product logo once it exists — swap the <svg> inside
   for an <img> and nothing else needs to change. */
.backtheme-product-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--backtheme-r-md);
  overflow: hidden;
}

.backtheme-product-logo img { width: 100%; height: 100%; object-fit: cover; }

.backtheme-product-card__label {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  letter-spacing: var(--backtheme-tracking-widest);
  text-transform: uppercase;
  color: var(--backtheme-fg-subtle);
  margin-bottom: var(--backtheme-space-xs);
}

/* "Built for" reads as metadata, not as a second feature list. */
.backtheme-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.backtheme-meta-chips li {
  font-size: var(--backtheme-step--2);
  color: var(--backtheme-fg-muted);
  padding: 4px 10px;
  border-radius: var(--backtheme-r-full);
  background: var(--backtheme-surface-2);
  border: 1px solid var(--backtheme-line);
}

.backtheme-product-card__foot { margin-top: auto; padding-top: var(--backtheme-space-xs); }

.backtheme-inset {
  position: relative;
  padding: var(--backtheme-space-m);
  background: var(--backtheme-surface-2);
  border: 1px solid var(--backtheme-line);
  border-radius: var(--backtheme-r-lg);
  border-left: 2px solid var(--backtheme-brand-500);
}

.backtheme-inset__title { font-size: var(--backtheme-step--1); font-weight: 600; color: var(--backtheme-fg); margin-bottom: var(--backtheme-space-xs); }

/* ------------------------------------------------------------
   Why choose
   ------------------------------------------------------------ */

.backtheme-why-grid { display: grid; gap: var(--backtheme-space-s); grid-template-columns: 1fr; }

@media (min-width: 700px)  { .backtheme-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .backtheme-why-grid { grid-template-columns: repeat(4, 1fr); } }

.backtheme-why-card { padding: var(--backtheme-space-m); gap: var(--backtheme-space-s); }
.backtheme-why-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--backtheme-space-s); }

.backtheme-why-card__mark {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--1);
  color: var(--backtheme-fg-subtle);
  letter-spacing: var(--backtheme-tracking-wide);
  opacity: .6;
}

.backtheme-why-card__title { font-size: var(--backtheme-step-1); letter-spacing: var(--backtheme-tracking-tight); }

/* ------------------------------------------------------------
   Process — a scroll-driven rail

   A single progress line runs through all six steps and fills as the
   section moves up the viewport. Each node lights the moment the line
   reaches it, so the sequence reads as a journey rather than six
   boxes. Node positions are measured from the DOM, so the same JS
   drives the horizontal desktop rail and the vertical mobile one.

   Everything degrades: without JS, or under prefers-reduced-motion,
   every step renders in its finished state.
   ------------------------------------------------------------ */

.backtheme-process { position: relative; }

/* ---- Rail ---- */
.backtheme-process__rail {
  position: absolute;
  z-index: 0;
  background: var(--backtheme-line-strong);
  border-radius: var(--backtheme-r-full);
}

.backtheme-process__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--backtheme-grad-brand);
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  will-change: transform;
}

/* The glowing head that travels with the fill. */
.backtheme-process__head {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -4px 0 0 -5px;
  border-radius: var(--backtheme-r-full);
  background: var(--backtheme-brand-400);
  box-shadow: 0 0 0 4px light-dark(rgba(0,113,189,.16), rgba(0,163,255,.18)),
              0 0 18px 2px light-dark(rgba(0,113,189,.5), rgba(0,163,255,.65));
  opacity: 0;
  transition: opacity var(--backtheme-dur-base) var(--backtheme-ease-out);
  pointer-events: none;
}

.backtheme-process.is-running .backtheme-process__head { opacity: 1; }

/* ---- Steps ---- */
.backtheme-process__steps { position: relative; z-index: 1; display: grid; }

.backtheme-process-step { position: relative; display: flex; }

.backtheme-process-step__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--backtheme-r-full);
  color: var(--backtheme-fg-subtle);
  background: var(--backtheme-surface-1);
  box-shadow: inset 0 0 0 1px var(--backtheme-line-strong);
  transition:
    color var(--backtheme-dur-slow) var(--backtheme-ease-out),
    background var(--backtheme-dur-slow) var(--backtheme-ease-out),
    box-shadow var(--backtheme-dur-slow) var(--backtheme-ease-out),
    transform var(--backtheme-dur-slow) var(--backtheme-ease-spring);
}

.backtheme-process-step__node svg { width: 24px; height: 24px; transition: transform var(--backtheme-dur-slow) var(--backtheme-ease-spring); }

.backtheme-process-step.is-active .backtheme-process-step__node {
  color: var(--backtheme-on-brand);
  background: var(--backtheme-grad-brand);
  box-shadow: inset 0 0 0 1px transparent,
              0 0 0 5px light-dark(rgba(0,113,189,.12), rgba(0,163,255,.14)),
              0 12px 28px -10px light-dark(rgba(0,100,170,.5), rgba(0,163,255,.6));
  transform: scale(1.06);
}

.backtheme-process-step.is-active .backtheme-process-step__node svg { transform: scale(1.06) rotate(-4deg); }

/* One-shot ring the moment a node lights up. */
.backtheme-process-step__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--backtheme-brand-400);
  opacity: 0;
}

.backtheme-process-step.is-active .backtheme-process-step__node::after { animation: node-ping 900ms var(--backtheme-ease-out) 1; }

@keyframes node-ping {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.85); }
}

.backtheme-process-step__content { display: flex; flex-direction: column; gap: 6px; }

.backtheme-process-step__number {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  font-weight: 500;
  letter-spacing: var(--backtheme-tracking-widest);
  color: var(--backtheme-fg-subtle);
  transition: color var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-process-step.is-active .backtheme-process-step__number { color: var(--backtheme-brand-ink); }

.backtheme-process-step__title {
  font-size: var(--backtheme-step-1);
  letter-spacing: var(--backtheme-tracking-tight);
  transition: color var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-process-step__body { font-size: var(--backtheme-step--1); color: var(--backtheme-fg-muted); line-height: var(--backtheme-lh-relaxed); }

/* Copy settles into place as its node lights. */
.backtheme-process-step__content > * {
  opacity: .45;
  transform: translateY(6px);
  transition:
    opacity var(--backtheme-dur-slow) var(--backtheme-ease-out),
    transform var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-process-step.is-active .backtheme-process-step__content > * { opacity: 1; transform: none; }
.backtheme-process-step.is-active .backtheme-process-step__content > :nth-child(2) { transition-delay: 60ms; }
.backtheme-process-step.is-active .backtheme-process-step__content > :nth-child(3) { transition-delay: 110ms; }

/* ---- Vertical rail: phones and tablets ---- */
@media (max-width: 1099px) {
  .backtheme-process__rail { top: 26px; bottom: 26px; left: 25px; width: 2px; }
  .backtheme-process__fill { transform-origin: center top; transform: scaleY(var(--fill, 0)); }
  .backtheme-process__head { left: 1px; top: calc(var(--fill, 0) * 100%); }
  .backtheme-process__steps { grid-template-columns: 1fr; gap: var(--backtheme-space-m); }
  .backtheme-process-step { gap: var(--backtheme-space-m); align-items: flex-start; }
  .backtheme-process-step__content { padding-top: 4px; }
}

/* ---- Horizontal rail: desktop ---- */
@media (min-width: 1100px) {
  .backtheme-process__rail { top: 25px; left: 0; right: 0; height: 2px; }
  .backtheme-process__head { top: 1px; left: calc(var(--fill, 0) * 100%); }
  .backtheme-process__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--backtheme-space-m); }
  .backtheme-process-step { flex-direction: column; gap: var(--backtheme-space-s); }
  .backtheme-process-step__content { padding-right: var(--backtheme-space-s); }
}

/* No JS, or reduced motion: show the finished state. */
.no-js .backtheme-process__fill,
.no-js .backtheme-process-step__content > * { transform: none; opacity: 1; }
.no-js .backtheme-process__fill { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .backtheme-process-step__node::after { animation: none; }
  .backtheme-process-step__content > * { opacity: 1; transform: none; transition: none; }
  .backtheme-process__head { display: none; }
}

/* ------------------------------------------------------------
   Industries

   A row list, not another card grid. Three card grids in a row
   (Why Choose -> Process -> Industries) made the page read as one
   repeating shape, and six one-line cards had far less content than
   the boxes around them. Rows carry short content honestly and give
   the section its own rhythm.
   ------------------------------------------------------------ */

.backtheme-industries { display: grid; gap: var(--backtheme-space-xl); align-items: start; }

@media (min-width: 980px) {
  .backtheme-industries { grid-template-columns: .8fr 1.2fr; gap: var(--backtheme-space-2xl); }
  .backtheme-industries__aside { position: sticky; top: calc(var(--backtheme-header-h) + var(--backtheme-space-m)); }
}

.backtheme-industry-list { display: grid; }

.backtheme-industry-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--backtheme-space-m);
  padding: var(--backtheme-space-m) var(--backtheme-space-s);
  border-top: 1px solid var(--backtheme-line);
  isolation: isolate;
  transition: padding var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-industry-row:last-child { border-bottom: 1px solid var(--backtheme-line); }

/* A wash that sweeps in from the leading edge on hover. */
.backtheme-industry-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    light-dark(rgba(0,113,189,.07), rgba(0,163,255,.08)) 0%,
    transparent 72%);
  opacity: 0;
  transition: opacity var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-industry-row:hover::before,
.backtheme-industry-row.is-active::before { opacity: 1; }

@media (min-width: 640px) {
  .backtheme-industry-row:hover,
  .backtheme-industry-row.is-active { padding-left: calc(var(--backtheme-space-s) + 10px); }
}

.backtheme-industry-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.backtheme-industry-row__name {
  font-size: var(--backtheme-step-2);
  letter-spacing: var(--backtheme-tracking-tight);
  transition: color var(--backtheme-dur-base) var(--backtheme-ease-out);
}

.backtheme-industry-row:hover .backtheme-industry-row__name,
.backtheme-industry-row.is-active .backtheme-industry-row__name { color: var(--backtheme-brand-ink); }

.backtheme-industry-row__description { font-size: var(--backtheme-step--1); color: var(--backtheme-fg-muted); line-height: 1.5; }

.backtheme-industry-row__arrow {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--backtheme-brand-ink);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--backtheme-dur-base) var(--backtheme-ease-out), transform var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-industry-row:hover .backtheme-industry-row__arrow,
.backtheme-industry-row.is-active .backtheme-industry-row__arrow { opacity: 1; transform: none; }

/* A left edge marker that only the highlighted row shows. */
.backtheme-industry-row::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  border-radius: var(--backtheme-r-full);
  background: var(--backtheme-grad-brand);
  transform: translateY(-50%);
  transition: height var(--backtheme-dur-slow) var(--backtheme-ease-out);
}

.backtheme-industry-row.is-active::after { height: 62%; }

/* Touch devices never hover, so the affordance has to be visible. */
@media (hover: none) {
  .backtheme-industry-row__arrow { opacity: .5; transform: none; }
}

/* ------------------------------------------------------------
   Portfolio

   Was a three-up grid of key/value cards — CHALLENGE, SOLUTION,
   TECHNOLOGY stacked as a labelled table, which reads as a spec
   sheet. Now each project leads with a preview of the thing that
   was built, and the same five facts are typeset as prose: inline
   kickers instead of a label column, technology as one mono line,
   and the result carried alone in the footer.
   ------------------------------------------------------------ */

/* Extra separation once the bar sits on its own row under the heading. */
@media (max-width: 1199px) {
  #portfolio .backtheme-section-header--split { gap: var(--backtheme-space-s); }
  #portfolio .backtheme-section-header__aside { margin-top: var(--backtheme-space-2xs); }
}

.backtheme-work-grid { display: grid; gap: var(--backtheme-space-m); grid-template-columns: 1fr; }

@media (min-width: 720px)  { .backtheme-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .backtheme-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.backtheme-work-card { padding: 0; gap: 0; overflow: hidden; }
.backtheme-work-card.is-hidden { display: none; }

/* Re-entrance when a filter changes, staggered by --i. Without it the
   grid snaps and the change is easy to miss. */
.backtheme-work-card.is-entering {
  animation: filter-in 440ms var(--backtheme-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes filter-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .backtheme-work-card.is-entering { animation: none; }
}

/* Preview stage */
.backtheme-work-card__media { min-height: 168px; padding: var(--backtheme-space-m) var(--backtheme-space-m) 0; }

.backtheme-work-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--backtheme-space-s);
  padding: var(--backtheme-space-m);
  flex: 1;
}

.backtheme-work-card__kicker {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  letter-spacing: var(--backtheme-tracking-widest);
  text-transform: uppercase;
  color: var(--backtheme-fg-subtle);
}

.backtheme-work-card__name {
  font-size: var(--backtheme-step-2);
  letter-spacing: var(--backtheme-tracking-tight);
  text-wrap: pretty;
  transition: color var(--backtheme-dur-base) var(--backtheme-ease-out);
}

.backtheme-work-card:hover .backtheme-work-card__name { color: var(--backtheme-brand-ink); }

.backtheme-work-card__text { display: grid; gap: var(--backtheme-space-2xs); }

.backtheme-work-card__paragraph {
  font-size: var(--backtheme-step--1);
  line-height: 1.6;
  color: var(--backtheme-fg-muted);
}

/* Inline kicker instead of a label column — the single biggest
   difference between "case study" and "spec sheet". */
.backtheme-work-card__paragraph b {
  font-weight: 600;
  color: var(--backtheme-fg);
}

.backtheme-work-card__paragraph b::after {
  content: ' — ';
  color: var(--backtheme-fg-subtle);
  font-weight: 400;
}

.backtheme-work-card__tech {
  font-family: var(--backtheme-font-mono);
  font-size: var(--backtheme-step--2);
  color: var(--backtheme-fg-subtle);
  letter-spacing: .01em;
}

.backtheme-work-card__result {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: var(--backtheme-space-s);
  border-top: 1px solid var(--backtheme-line);
  font-size: var(--backtheme-step--1);
  font-weight: 600;
  color: var(--backtheme-success);
}

.backtheme-work-card__result svg { width: 15px; height: 15px; flex: none; transition: transform var(--backtheme-dur-base) var(--backtheme-ease-out); }
.backtheme-work-card:hover .backtheme-work-card__result svg { transform: translate(2px, -2px); }

.backtheme-work-empty {
  grid-column: 1 / -1;
  padding: var(--backtheme-space-xl);
  text-align: center;
  color: var(--backtheme-fg-subtle);
  border: 1px dashed var(--backtheme-line-strong);
  border-radius: var(--backtheme-r-lg);
}

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

.backtheme-testimonial-grid { display: grid; gap: var(--backtheme-space-s); grid-template-columns: 1fr; }

@media (min-width: 820px) { .backtheme-testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.backtheme-testimonial { padding: var(--backtheme-space-l); gap: var(--backtheme-space-m); }

.backtheme-testimonial__quote {
  position: relative;
  font-size: var(--backtheme-step-1);
  line-height: 1.62;
  letter-spacing: var(--backtheme-tracking-tight);
  color: var(--backtheme-fg);
}

.backtheme-testimonial__mark {
  display: block;
  font-family: var(--backtheme-font-serif);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--backtheme-brand-500);
  opacity: .32;
  margin-bottom: 6px;
}

.backtheme-testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--backtheme-space-xs);
  margin-top: auto;
  padding-top: var(--backtheme-space-s);
  border-top: 1px solid var(--backtheme-line);
}

.backtheme-avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--backtheme-r-full);
  font-size: var(--backtheme-step--1);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--backtheme-on-brand);
  background: var(--backtheme-grad-brand);
}

.backtheme-testimonial__name { font-size: var(--backtheme-step--1); font-weight: 600; }
.backtheme-testimonial__role { font-size: var(--backtheme-step--2); color: var(--backtheme-fg-subtle); }

.backtheme-testimonial__result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: var(--backtheme-step--2);
  font-weight: 600;
  color: var(--backtheme-success);
  background: var(--backtheme-success-bg);
  border: 1px solid var(--backtheme-success-line);
  border-radius: var(--backtheme-r-full);
}

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

.backtheme-faq { display: grid; gap: var(--backtheme-space-xl); align-items: start; }

@media (min-width: 960px) {
  .backtheme-faq { grid-template-columns: .8fr 1.2fr; gap: var(--backtheme-space-2xl); }
  .backtheme-faq__aside { position: sticky; top: calc(var(--backtheme-header-h) + var(--backtheme-space-m)); }
}

/* ------------------------------------------------------------
   CTA band
   ------------------------------------------------------------ */

.backtheme-cta {
  position: relative;
  padding: clamp(2.75rem, 2rem + 4vw, 5rem) var(--backtheme-space-m);
  background: linear-gradient(150deg, var(--backtheme-surface-2) 0%, var(--backtheme-surface-1) 70%);
  border: 1px solid var(--backtheme-line);
  border-radius: var(--backtheme-r-2xl);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.backtheme-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 15%;
  width: 70%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--backtheme-brand-500), transparent);
}

.backtheme-cta__glow { bottom: -70%; left: 50%; transform: translateX(-50%); width: min(780px, 120%); aspect-ratio: 1; }

.backtheme-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--backtheme-space-s);
  max-width: 62ch;
  margin-inline: auto;
}

.backtheme-cta__title { font-size: var(--backtheme-step-5); }
.backtheme-cta__actions { display: flex; flex-wrap: wrap; gap: var(--backtheme-space-xs); justify-content: center; margin-top: var(--backtheme-space-2xs); }

@media (max-width: 420px) {
  .backtheme-cta__actions { flex-direction: column; align-self: stretch; }
  .backtheme-cta__actions .backtheme-button { width: 100%; }
}

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */

.backtheme-contact { display: grid; gap: var(--backtheme-space-xl); align-items: start; }

@media (min-width: 980px) { .backtheme-contact { grid-template-columns: .85fr 1.15fr; gap: var(--backtheme-space-2xl); } }

.backtheme-contact__aside { display: flex; flex-direction: column; gap: var(--backtheme-space-m); }
.backtheme-contact-points { display: grid; gap: var(--backtheme-space-s); }
.backtheme-contact-point { display: flex; gap: var(--backtheme-space-s); align-items: center; }
.backtheme-contact-point__text { display: flex; flex-direction: column; gap: 2px; }

.backtheme-contact-point__label {
  font-size: var(--backtheme-step--2);
  font-family: var(--backtheme-font-mono);
  letter-spacing: var(--backtheme-tracking-wide);
  color: var(--backtheme-fg-subtle);
  text-transform: uppercase;
}

.backtheme-contact-point__value { font-size: var(--backtheme-step-0); font-weight: 500; }
.backtheme-contact-point__value a:hover { color: var(--backtheme-brand-ink); }

.backtheme-form-card { padding: var(--backtheme-space-l); background: var(--backtheme-surface-1); border: 1px solid var(--backtheme-line); border-radius: var(--backtheme-r-xl); }
.backtheme-form-grid { display: grid; gap: var(--backtheme-space-s); }

@media (min-width: 620px) {
  .backtheme-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backtheme-form-grid .backtheme-field--full { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   Blog
   ------------------------------------------------------------ */

.backtheme-post-grid { display: grid; gap: var(--backtheme-space-s); grid-template-columns: 1fr; }

@media (min-width: 760px)  { .backtheme-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .backtheme-post-grid { grid-template-columns: repeat(3, 1fr); } }

.backtheme-post-card { padding: 0; overflow: hidden; }

.backtheme-post-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--backtheme-surface-3), var(--backtheme-surface-1));
  border-bottom: 1px solid var(--backtheme-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.backtheme-post-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--backtheme-glow-brand), transparent 58%);
}

/* A window preview beats a floating icon: the card now shows a layout,
   which is what the article is about. */
.backtheme-post-card__thumb {
  place-items: end center;
  padding: var(--backtheme-space-m) var(--backtheme-space-m) 0;
}

.backtheme-post-card__thumb .backtheme-web-preview,
.backtheme-post-card__thumb .backtheme-phone-preview { position: relative; z-index: 1; }
.backtheme-post-card__thumb .backtheme-web-preview { max-width: 240px; }
.backtheme-post-card:hover .backtheme-web-preview,
.backtheme-post-card:hover .backtheme-phone-preview { transform: translateY(-6px); }
.backtheme-post-card__body { display: flex; flex-direction: column; gap: var(--backtheme-space-xs); padding: var(--backtheme-space-m); flex: 1; }

.backtheme-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--backtheme-space-xs);
  font-size: var(--backtheme-step--2);
  font-family: var(--backtheme-font-mono);
  color: var(--backtheme-fg-subtle);
  letter-spacing: var(--backtheme-tracking-wide);
}

.backtheme-post-card__title { font-size: var(--backtheme-step-1); letter-spacing: var(--backtheme-tracking-tight); transition: color var(--backtheme-dur-fast) var(--backtheme-ease-out); }
.backtheme-post-card:hover .backtheme-post-card__title { color: var(--backtheme-brand-ink); }
.backtheme-post-card__excerpt { font-size: var(--backtheme-step--1); color: var(--backtheme-fg-muted); line-height: var(--backtheme-lh-relaxed); }
.backtheme-post-card__foot { margin-top: auto; padding-top: var(--backtheme-space-s); }

.backtheme-prose { max-width: var(--backtheme-container-prose); }
.backtheme-prose > * + * { margin-top: var(--backtheme-space-s); }
.backtheme-prose h2 { font-size: var(--backtheme-step-3); margin-top: var(--backtheme-space-xl); }
.backtheme-prose h3 { font-size: var(--backtheme-step-2); margin-top: var(--backtheme-space-l); }
.backtheme-prose p { color: var(--backtheme-fg-muted); line-height: var(--backtheme-lh-relaxed); }
.backtheme-prose ul { display: grid; gap: var(--backtheme-space-2xs); padding-left: 0; }
.backtheme-prose ul li { position: relative; padding-left: 20px; color: var(--backtheme-fg-muted); }

.backtheme-prose ul li::before {
  content: '';
  position: absolute; left: 2px; top: .68em;
  width: 6px; height: 6px;
  border-radius: var(--backtheme-r-full);
  background: var(--backtheme-brand-500);
}

.backtheme-prose blockquote {
  padding: var(--backtheme-space-m);
  border-left: 2px solid var(--backtheme-brand-500);
  background: var(--backtheme-surface-2);
  border-radius: 0 var(--backtheme-r-md) var(--backtheme-r-md) 0;
  font-size: var(--backtheme-step-1);
  color: var(--backtheme-fg);
}

.backtheme-prose a { color: var(--backtheme-brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Expertise grid (services page)
   ------------------------------------------------------------ */

.backtheme-expertise-grid { display: grid; gap: var(--backtheme-space-s); grid-template-columns: 1fr; }

@media (min-width: 700px)  { .backtheme-expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .backtheme-expertise-grid { grid-template-columns: repeat(3, 1fr); } }

.backtheme-expertise { padding: var(--backtheme-space-l); gap: var(--backtheme-space-s); }


/* ------------------------------------------------------------
   Phone overrides

   Last on purpose. These selectors have the same specificity as the
   component rules above, so they only win by coming later — putting
   this block anywhere else silently loses to whichever card rule is
   declared further down the file.
   ------------------------------------------------------------ */

@media (max-width: 599px) {
  /* 32px of inset on a 350px screen is most of the card. */
  .backtheme-expertise,
  .backtheme-testimonial,
  .backtheme-product-card__body,
  .backtheme-post-card__body,
  .backtheme-form-card,
  .backtheme-panel,
  .backtheme-product-feature__body { padding: var(--backtheme-space-m); }

  .backtheme-why-card { padding: var(--backtheme-space-s) var(--backtheme-space-m); }
  .backtheme-product-feature__aside { padding: 0 var(--backtheme-space-m) var(--backtheme-space-l); }
  .backtheme-cta { padding-inline: var(--backtheme-space-m); }
}