/* ==========================================================================
   FourSpan Tech ? Premium WordPress Theme
   main.css ? Complete design system & component styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Deep navy */
  --fst-navy-950: #060d18;
  --fst-navy-900: #0a1628;
  --fst-navy-800: #0f1f35;
  --fst-navy-700: #1a2d4a;

  /* Electric blue */
  --fst-blue-700: #1d4ed8;
  --fst-blue-600: #2563eb;
  --fst-blue-500: #3b82f6;

  /* Cyan accent */
  --fst-cyan-500: #06b6d4;
  --fst-cyan-400: #22d3ee;

  /* Backgrounds */
  --fst-bg-white: #ffffff;
  --fst-bg-slate-50: #f8fafc;
  --fst-bg-slate-100: #f1f5f9;

  /* Text */
  --fst-text-charcoal: #0f172a;
  --fst-text-slate: #334155;
  --fst-text-muted: #64748b;
  --fst-text-inverse: #f8fafc;
  --fst-text-inverse-muted: #94a3b8;

  /* Borders */
  --fst-border: #e2e8f0;
  --fst-border-strong: #cbd5e1;
  --fst-border-dark: rgba(255, 255, 255, 0.1);

  /* Radius */
  --fst-radius-sm: 8px;
  --fst-radius-md: 12px;
  --fst-radius-lg: 16px;
  --fst-radius-xl: 24px;
  --fst-radius-full: 9999px;

  /* Shadows ? soft */
  --fst-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --fst-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --fst-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --fst-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1);
  --fst-shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12);
  --fst-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Typography */
  --fst-font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fst-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --fst-text-xs: 0.75rem;
  --fst-text-sm: 0.875rem;
  --fst-text-base: 1rem;
  --fst-text-lg: 1.125rem;
  --fst-text-xl: 1.25rem;
  --fst-text-2xl: 1.5rem;
  --fst-text-3xl: 1.875rem;
  --fst-text-4xl: 2.25rem;
  --fst-text-5xl: 3rem;
  --fst-text-6xl: 3.75rem;

  --fst-leading-tight: 1.2;
  --fst-leading-snug: 1.35;
  --fst-leading-normal: 1.6;
  --fst-leading-relaxed: 1.75;

  --fst-tracking-tight: -0.025em;
  --fst-tracking-normal: 0;
  --fst-tracking-wide: 0.04em;

  --fst-weight-regular: 400;
  --fst-weight-medium: 500;
  --fst-weight-semibold: 600;
  --fst-weight-bold: 700;
  --fst-weight-extrabold: 800;

  /* Spacing scale */
  --fst-space-1: 0.25rem;
  --fst-space-2: 0.5rem;
  --fst-space-3: 0.75rem;
  --fst-space-4: 1rem;
  --fst-space-5: 1.25rem;
  --fst-space-6: 1.5rem;
  --fst-space-8: 2rem;
  --fst-space-10: 2.5rem;
  --fst-space-12: 3rem;
  --fst-space-16: 4rem;
  --fst-space-20: 5rem;
  --fst-space-24: 6rem;
  --fst-space-32: 8rem;

  /* Layout */
  --fst-container: 1200px;
  --fst-container-narrow: 800px;
  --fst-container-wide: 1400px;
  --fst-gutter: 1.25rem;
  --fst-header-height: 88px;
  --fst-header-height-scrolled: 76px;
  --fst-logo-height: 66px;
  --fst-logo-height-scrolled: 58px;

  /* Transitions */
  --fst-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fst-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fst-duration-fast: 150ms;
  --fst-duration: 250ms;
  --fst-duration-slow: 400ms;

  /* Semantic aliases */
  --fst-color-primary: var(--fst-blue-600);
  --fst-color-primary-hover: var(--fst-blue-700);
  --fst-color-accent: var(--fst-cyan-500);
  --fst-color-surface: var(--fst-bg-white);
  --fst-color-surface-alt: var(--fst-bg-slate-50);
  --fst-color-ink: var(--fst-text-charcoal);
  --fst-color-body: var(--fst-text-slate);
  --fst-color-muted: var(--fst-text-muted);
}

/* --------------------------------------------------------------------------
   2. Reset / Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fst-header-height) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--fst-font);
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-regular);
  line-height: var(--fst-leading-normal);
  color: var(--fst-color-body);
  background-color: var(--fst-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

svg {
  fill: currentColor;
}

svg[fill="none"] {
  fill: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--fst-color-primary);
  text-decoration: none;
  transition: color var(--fst-duration) var(--fst-ease);
}

a:hover {
  color: var(--fst-color-primary-hover);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

iframe {
  border: 0;
}

::selection {
  background-color: rgba(37, 99, 235, 0.15);
  color: var(--fst-text-charcoal);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--fst-blue-600);
  outline-offset: 3px;
  box-shadow: var(--fst-shadow-focus);
}

.fst-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fst-skip-link {
  position: absolute;
  top: -100%;
  left: var(--fst-space-4);
  z-index: 10000;
  padding: var(--fst-space-3) var(--fst-space-5);
  background: var(--fst-navy-900);
  color: var(--fst-text-inverse);
  border-radius: var(--fst-radius-sm);
  font-weight: var(--fst-weight-semibold);
  font-size: var(--fst-text-sm);
}

.fst-skip-link:focus {
  top: var(--fst-space-4);
}

/* --------------------------------------------------------------------------
   3. Typography Hierarchy
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.fst-h1, .fst-h2, .fst-h3, .fst-h4, .fst-h5, .fst-h6 {
  font-family: var(--fst-font);
  color: var(--fst-color-ink);
  font-weight: var(--fst-weight-bold);
  line-height: var(--fst-leading-tight);
  letter-spacing: var(--fst-tracking-tight);
  text-wrap: balance;
}

h1, .fst-h1 {
  font-size: clamp(2rem, 5vw, var(--fst-text-5xl));
  font-weight: var(--fst-weight-extrabold);
}

h2, .fst-h2 {
  font-size: clamp(1.75rem, 4vw, var(--fst-text-4xl));
}

h3, .fst-h3 {
  font-size: clamp(1.375rem, 3vw, var(--fst-text-2xl));
}

h4, .fst-h4 {
  font-size: var(--fst-text-xl);
  font-weight: var(--fst-weight-semibold);
}

h5, .fst-h5 {
  font-size: var(--fst-text-lg);
  font-weight: var(--fst-weight-semibold);
}

h6, .fst-h6 {
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-semibold);
}

p {
  margin-bottom: var(--fst-space-4);
  max-width: 65ch;
}

p:last-child {
  margin-bottom: 0;
}

.fst-lead {
  font-size: var(--fst-text-lg);
  line-height: var(--fst-leading-relaxed);
  color: var(--fst-text-slate);
}

.fst-eyebrow {
  display: inline-block;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-blue-600);
  margin-bottom: var(--fst-space-3);
}

.fst-eyebrow--light {
  color: var(--fst-cyan-400);
}

.fst-text-muted {
  color: var(--fst-text-muted);
}

.fst-text-center {
  text-align: center;
}

.fst-text-left {
  text-align: left;
}

.fst-text-right {
  text-align: right;
}

.fst-prose {
  font-size: var(--fst-text-base);
  line-height: var(--fst-leading-relaxed);
  color: var(--fst-color-body);
}

.fst-prose > * + * {
  margin-top: var(--fst-space-4);
}

.fst-prose h2,
.fst-prose h3,
.fst-prose h4 {
  margin-top: var(--fst-space-8);
  margin-bottom: var(--fst-space-3);
}

.fst-prose ul,
.fst-prose ol {
  padding-left: var(--fst-space-6);
  margin-bottom: var(--fst-space-4);
}

.fst-prose ul {
  list-style: disc;
}

.fst-prose ol {
  list-style: decimal;
}

.fst-prose li + li {
  margin-top: var(--fst-space-2);
}

.fst-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fst-prose blockquote {
  margin: var(--fst-space-6) 0;
  padding: var(--fst-space-4) var(--fst-space-6);
  border-left: 3px solid var(--fst-blue-600);
  background: var(--fst-bg-slate-50);
  border-radius: 0 var(--fst-radius-md) var(--fst-radius-md) 0;
  font-style: italic;
  color: var(--fst-text-slate);
}

.fst-prose code {
  font-family: var(--fst-font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--fst-bg-slate-100);
  border-radius: 4px;
  color: var(--fst-navy-800);
}

.fst-prose pre {
  margin: var(--fst-space-6) 0;
  padding: var(--fst-space-5);
  background: var(--fst-navy-900);
  color: var(--fst-text-inverse);
  border-radius: var(--fst-radius-md);
  overflow-x: auto;
  font-family: var(--fst-font-mono);
  font-size: var(--fst-text-sm);
  line-height: 1.7;
}

.fst-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.fst-prose img {
  border-radius: var(--fst-radius-lg);
  margin: var(--fst-space-6) 0;
}

.fst-prose hr {
  border: none;
  border-top: 1px solid var(--fst-border);
  margin: var(--fst-space-10) 0;
}

/* --------------------------------------------------------------------------
   4. Layout ? Container, Sections, Grids
   -------------------------------------------------------------------------- */
.fst-container {
  width: 100%;
  max-width: var(--fst-container);
  margin-inline: auto;
  padding-inline: var(--fst-gutter);
}

.fst-container--narrow {
  max-width: var(--fst-container-narrow);
}

.fst-container--wide {
  max-width: var(--fst-container-wide);
}

.fst-section {
  padding-block: var(--fst-space-12);
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.fst-hero,
.fst-header {
  content-visibility: visible;
}

.fst-section--sm {
  padding-block: var(--fst-space-8);
}

.fst-section--lg {
  padding-block: var(--fst-space-16);
}

.fst-section--alt,
.fst-section--muted {
  background-color: var(--fst-bg-slate-50);
}

.fst-section-head {
  margin-bottom: var(--fst-space-8);
  max-width: 640px;
}

.fst-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.fst-section-title {
  margin: 0 0 var(--fst-space-3);
  color: var(--fst-navy-900);
}

.fst-section-text {
  margin: 0;
  color: var(--fst-text-muted);
  font-size: var(--fst-text-base);
  line-height: var(--fst-leading-relaxed);
}

.fst-section-head .fst-eyebrow {
  margin-bottom: var(--fst-space-3);
}

.fst-section--dark {
  background-color: var(--fst-navy-900);
  color: var(--fst-text-inverse-muted);
}

.fst-section--dark .fst-eyebrow {
  color: #93c5fd;
}

.fst-section--dark h1,
.fst-section--dark h2,
.fst-section--dark h3,
.fst-section--dark h4,
.fst-section--dark .fst-h1,
.fst-section--dark .fst-h2,
.fst-section--dark .fst-h3,
.fst-section--dark .fst-h4 {
  color: var(--fst-text-inverse);
}

.fst-section--dark .fst-section-text {
  color: rgba(226, 232, 240, 0.78);
}

.fst-section__header {
  margin-bottom: var(--fst-space-8);
  max-width: 640px;
}

.fst-section__header--center {
  margin-inline: auto;
  text-align: center;
}

.fst-section__header .fst-lead {
  margin-top: var(--fst-space-4);
}

.fst-grid {
  display: grid;
  gap: var(--fst-space-6);
}

.fst-grid--2 {
  grid-template-columns: 1fr;
}

.fst-grid--3 {
  grid-template-columns: 1fr;
}

.fst-grid--4 {
  grid-template-columns: 1fr;
}

.fst-flex {
  display: flex;
  gap: var(--fst-space-4);
}

.fst-flex--wrap {
  flex-wrap: wrap;
}

.fst-flex--center {
  align-items: center;
  justify-content: center;
}

.fst-flex--between {
  align-items: center;
  justify-content: space-between;
}

.fst-flex--col {
  flex-direction: column;
}

.fst-stack > * + * {
  margin-top: var(--fst-space-4);
}

.fst-stack--sm > * + * {
  margin-top: var(--fst-space-2);
}

.fst-stack--lg > * + * {
  margin-top: var(--fst-space-8);
}

@media (min-width: 640px) {
  :root {
    --fst-gutter: 1.5rem;
  }

  .fst-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .fst-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .fst-section {
    padding-block: var(--fst-space-14, 3.5rem);
  }

  .fst-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  :root {
    --fst-gutter: 2rem;
  }

  .fst-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .fst-section--lg {
    padding-block: var(--fst-space-32);
  }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.fst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fst-space-2);
  font-family: var(--fst-font);
  font-weight: var(--fst-weight-semibold);
  font-size: var(--fst-text-sm);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--fst-radius-sm);
  border: 1.5px solid transparent;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  transition:
    background-color var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration-fast) var(--fst-ease);
  -webkit-tap-highlight-color: transparent;
}

.fst-btn:hover {
  text-decoration: none;
}

.fst-btn:active {
  transform: translateY(1px);
}

.fst-btn:disabled,
.fst-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fst-btn svg,
.fst-btn .fst-icon svg {
  width: 1.125em;
  height: 1.125em;
  max-width: none;
  flex-shrink: 0;
}

/* Variants */
.fst-btn--primary {
  background: var(--fst-blue-600);
  color: #fff;
  border-color: var(--fst-blue-600);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.2);
}

.fst-btn--primary:hover {
  background: var(--fst-blue-700);
  border-color: var(--fst-blue-700);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.fst-btn--secondary {
  background: var(--fst-navy-800);
  color: #fff;
  border-color: var(--fst-navy-800);
}

.fst-btn--secondary:hover {
  background: var(--fst-navy-700);
  border-color: var(--fst-navy-700);
  color: #fff;
}

.fst-btn--outline {
  background: transparent;
  color: var(--fst-blue-600);
  border-color: var(--fst-blue-600);
}

.fst-btn--outline:hover {
  background: rgba(37, 99, 235, 0.06);
  color: var(--fst-blue-700);
  border-color: var(--fst-blue-700);
}

.fst-btn--ghost {
  background: transparent;
  color: var(--fst-text-slate);
  border-color: transparent;
}

.fst-btn--ghost:hover {
  background: var(--fst-bg-slate-100);
  color: var(--fst-text-charcoal);
}

.fst-btn--light {
  background: #fff;
  color: var(--fst-navy-900);
  border-color: #fff;
}

.fst-btn--light:hover {
  background: var(--fst-bg-slate-50);
  color: var(--fst-navy-950);
}

.fst-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.fst-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* Sizes */
.fst-btn--sm {
  padding: 0.625rem 1rem;
  font-size: var(--fst-text-xs);
}

.fst-btn--lg {
  padding: 1.0625rem 2rem;
  font-size: var(--fst-text-base);
  border-radius: var(--fst-radius-md);
}

.fst-btn--xl {
  padding: 1.25rem 2.5rem;
  font-size: var(--fst-text-lg);
  border-radius: var(--fst-radius-md);
}

.fst-btn--block {
  width: 100%;
}

.fst-btn--icon {
  padding: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
}

.fst-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  align-items: center;
}

/* Icons & text links */
.fst-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}

.fst-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  max-width: none;
}

.fst-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-2);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-blue-600);
}

.fst-link .fst-icon svg,
.fst-link > svg {
  width: 16px;
  height: 16px;
  transition: transform var(--fst-duration) var(--fst-ease);
}

.fst-link:hover .fst-icon svg,
.fst-link:hover > svg {
  transform: translateX(4px);
}

.fst-link--light {
  color: rgba(255, 255, 255, 0.92);
}

.fst-link--light:hover {
  color: #fff;
}
/* --------------------------------------------------------------------------
   6. Header ? Sticky, Nav, Dropdown, Mobile Drawer
   -------------------------------------------------------------------------- */
.fst-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--fst-header-height);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition:
    height var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

/* Blur on pseudo so position:fixed mobile nav is not trapped by backdrop-filter */
.fst-header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

.fst-header.is-scrolled {
  height: var(--fst-header-height-scrolled);
  border-bottom-color: var(--fst-border);
  box-shadow: var(--fst-shadow-sm);
}

.fst-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--fst-space-6);
}

.fst-header__logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--fst-navy-900);
}

.fst-header__logo:hover {
  color: var(--fst-navy-900);
}

.fst-header__logo img:not(.fst-logo__mark-img),
.fst-header__logo svg,
.fst-logo__img {
  height: var(--fst-logo-height);
  width: auto;
  max-width: min(300px, 64vw);
  display: block;
  object-fit: contain;
  transition: height var(--fst-duration) var(--fst-ease);
}

.fst-header.is-scrolled .fst-header__logo img:not(.fst-logo__mark-img),
.fst-header.is-scrolled .fst-header__logo svg,
.fst-header.is-scrolled .fst-logo__img {
  height: var(--fst-logo-height-scrolled);
}

@media (max-width: 767px) {
  :root {
    --fst-header-height: 82px;
    --fst-header-height-scrolled: 74px;
    --fst-logo-height: 62px;
    --fst-logo-height-scrolled: 56px;
  }
}

.fst-logo__mark-img {
  width: 42px;
  height: 42px;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.fst-logo__mark-img--sidebar {
  width: 36px;
  height: 36px;
}

.fst-logo--sidebar .fst-logo__four,
.fst-logo--sidebar .fst-logo__span {
  font-size: 1.05rem;
}

.fst-logo--sidebar .fst-logo__tech {
  font-size: 0.52rem;
}

.fst-logo__img--sidebar {
  height: 44px;
  max-width: 100%;
}

.fst-widget--brand {
  text-align: left;
}

.fst-widget__brand-text {
  margin-top: var(--fst-space-3);
  font-size: var(--fst-text-sm);
  line-height: var(--fst-leading-relaxed);
  color: var(--fst-text-slate);
}

.fst-logo__wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  gap: 0.15rem;
}

.fst-logo__wordmark-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.fst-logo__four,
.fst-logo__span {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fst-logo__four {
  background: linear-gradient(180deg, #ffb020 0%, #ff7a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  padding-right: 0.02em;
}

.fst-logo__span {
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fst-logo__tech {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.04em;
  color: #64748b;
  text-transform: uppercase;
}

.fst-logo__img {
  border-radius: 0;
}

.fst-logo__img--brand {
  height: var(--fst-logo-height);
  width: auto;
  max-width: min(300px, 64vw);
  object-fit: contain;
  display: block;
  border-radius: var(--fst-radius-md);
}

.fst-logo__img--footer {
  height: 54px;
  max-width: 240px;
  border-radius: 0;
}

.fst-header__logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

.fst-header__logo-text {
  font-size: var(--fst-text-lg);
  font-weight: var(--fst-weight-extrabold);
  letter-spacing: var(--fst-tracking-tight);
  color: var(--fst-navy-900);
}

.fst-header__logo-text span {
  color: var(--fst-blue-600);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fst-header__nav {
  display: none;
  align-items: center;
  gap: var(--fst-space-1);
  height: 100%;
}

.fst-header__actions {
  display: none;
  align-items: center;
  gap: var(--fst-space-3);
}

.fst-nav__list {
  display: flex;
  align-items: center;
  gap: var(--fst-space-1);
  height: 100%;
}

.fst-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.fst-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-1);
  padding: var(--fst-space-2) var(--fst-space-3);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
  border-radius: var(--fst-radius-sm);
  transition:
    color var(--fst-duration-fast) var(--fst-ease),
    background var(--fst-duration-fast) var(--fst-ease);
}

.fst-nav__link:hover,
.fst-nav__link.is-active,
.fst-nav__item:hover > .fst-nav__link {
  color: var(--fst-navy-900);
  background: var(--fst-bg-slate-50);
}

.fst-nav__link svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform var(--fst-duration) var(--fst-ease);
}

.fst-nav__item:hover > .fst-nav__link svg,
.fst-nav__item.is-open > .fst-nav__link svg {
  transform: rotate(180deg);
}

/* Dropdown */
.fst-nav__dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  padding: var(--fst-space-2);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-md);
  box-shadow: var(--fst-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--fst-duration) var(--fst-ease),
    visibility var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration) var(--fst-ease);
  z-index: 100;
}

.fst-nav__item:hover > .fst-nav__dropdown,
.fst-nav__item:focus-within > .fst-nav__dropdown,
.fst-nav__item.is-open > .fst-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.fst-nav__dropdown a {
  display: flex;
  align-items: flex-start;
  gap: var(--fst-space-3);
  padding: var(--fst-space-3);
  border-radius: var(--fst-radius-sm);
  color: var(--fst-text-slate);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  transition: background var(--fst-duration-fast) var(--fst-ease);
}

.fst-nav__dropdown a:hover {
  background: var(--fst-bg-slate-50);
  color: var(--fst-navy-900);
}

.fst-nav__dropdown-title {
  display: block;
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-text-charcoal);
  margin-bottom: 2px;
}

.fst-nav__dropdown-desc {
  display: block;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-regular);
  color: var(--fst-text-muted);
  line-height: 1.4;
}

.fst-nav__dropdown--wide {
  min-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fst-space-1);
}

/* Mobile toggle */
.fst-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fst-radius-sm);
  color: var(--fst-navy-900);
  transition: background var(--fst-duration-fast) var(--fst-ease);
}

.fst-header__toggle:hover {
  background: var(--fst-bg-slate-100);
}

.fst-header__toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.fst-header__toggle-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform var(--fst-duration) var(--fst-ease),
    opacity var(--fst-duration) var(--fst-ease);
  transform-origin: center;
}

.fst-header.is-open .fst-header__toggle-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fst-header.is-open .fst-header__toggle-icon span:nth-child(2) {
  opacity: 0;
}

.fst-header.is-open .fst-header__toggle-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.fst-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}

.fst-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.fst-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 13, 24, 0.5);
  opacity: 0;
  transition: opacity var(--fst-duration) var(--fst-ease);
}

.fst-drawer.is-open .fst-drawer__backdrop {
  opacity: 1;
}

.fst-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 360px);
  height: 100%;
  background: var(--fst-bg-white);
  box-shadow: var(--fst-shadow-xl);
  padding: calc(var(--fst-header-height) + var(--fst-space-4)) var(--fst-space-6) var(--fst-space-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--fst-duration-slow) var(--fst-ease);
}

.fst-drawer.is-open .fst-drawer__panel {
  transform: translateX(0);
}

.fst-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-1);
}

.fst-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fst-space-3) var(--fst-space-4);
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-charcoal);
  border-radius: var(--fst-radius-sm);
}

.fst-drawer__link:hover {
  background: var(--fst-bg-slate-50);
  color: var(--fst-blue-600);
}

.fst-drawer__sub {
  display: none;
  padding-left: var(--fst-space-4);
  margin-bottom: var(--fst-space-2);
}

.fst-drawer__sub.is-open {
  display: block;
}

.fst-drawer__sub a {
  display: block;
  padding: var(--fst-space-2) var(--fst-space-4);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  border-radius: var(--fst-radius-sm);
}

.fst-drawer__sub a:hover {
  color: var(--fst-blue-600);
  background: var(--fst-bg-slate-50);
}

.fst-drawer__actions {
  margin-top: var(--fst-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
}

@media (min-width: 1024px) {
  .fst-header__nav,
  .fst-header__actions {
    display: flex;
    position: static;
    inset: auto;
    width: auto;
    height: 100%;
    max-height: none;
    padding: 0;
    overflow: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  .fst-header__toggle {
    display: none;
  }

  .fst-drawer {
    display: none;
  }
}

body.fst-nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Hero (Home) ? modern full-bleed slider
   -------------------------------------------------------------------------- */
.fst-hero {
  position: relative;
  overflow: hidden;
  color: var(--fst-text-inverse-muted);
  background: var(--fst-navy-950);
}

/* Below-fold sections: allow the browser to skip rendering work until near viewport. */
.fst-section,
.fst-trust,
.fst-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.fst-hero,
.fst-header {
  content-visibility: visible;
}

.fst-hero-slider,
.fst-hero-slider__viewport,
.fst-hero-slide {
  position: relative;
  min-height: inherit;
}

.fst-hero-slide {
  display: none;
  min-height: clamp(34rem, 88vh, 44rem);
  color: #fff;
}

.fst-hero-slide.is-active {
  display: block;
  animation: fst-hero-in 0.7s var(--fst-ease) both;
}

.fst-hero-slide[hidden] {
  display: none !important;
}

.fst-hero-slide__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-hero-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 7s linear;
}

.fst-hero-slide.is-active .fst-hero-slide__media img {
  transform: scale(1.12);
}

.fst-hero-slide__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.92) 0%, rgba(6, 13, 24, 0.78) 42%, rgba(6, 13, 24, 0.45) 72%, rgba(6, 13, 24, 0.55) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 40%);
}

.fst-hero-slide__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 10%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

.fst-hero-slide__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: inherit;
  padding-block: var(--fst-space-12) var(--fst-space-20);
}

.fst-hero-slide__copy {
  max-width: 40rem;
}

.fst-hero--slider .fst-eyebrow--light {
  color: #93c5fd;
  margin-bottom: var(--fst-space-4);
}

.fst-hero--slider .fst-hero__title {
  color: #fff;
  margin: 0 0 var(--fst-space-5);
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-weight: var(--fst-weight-extrabold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fst-hero--slider .fst-hero__title--slide {
  margin: 0 0 var(--fst-space-5);
}

.fst-hero--slider .fst-hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.88);
  margin: 0 0 var(--fst-space-8);
  max-width: 46ch;
}

.fst-hero--slider .fst-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  margin-bottom: var(--fst-space-8);
}

.fst-hero-slide__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fst-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34rem;
}

.fst-hero-slide__stats li {
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fst-hero-slide__stats strong {
  display: block;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}

.fst-hero-slide__stats span {
  color: rgba(226, 232, 240, 0.7);
  font-size: 0.7rem;
  line-height: 1.3;
}

.fst-hero-slider__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding-bottom: var(--fst-space-6);
  pointer-events: none;
}

.fst-hero-slider__ui-inner {
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.fst-hero-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.fst-hero-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition:
    width var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease);
}

.fst-hero-slider__dot.is-active {
  width: 28px;
  background: #fff;
}

.fst-hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    opacity 0.25s var(--fst-ease),
    visibility 0.25s var(--fst-ease),
    background 0.25s var(--fst-ease),
    border-color 0.25s var(--fst-ease),
    transform 0.25s var(--fst-ease);
}

.fst-hero-slider__arrow--prev {
  left: 1rem;
  transform: translateY(-50%) translateX(-8px);
}

.fst-hero-slider__arrow--next {
  right: 1rem;
  transform: translateY(-50%) translateX(8px);
}

.fst-hero-slider__arrow svg {
  width: 20px;
  height: 20px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-hero-slider.is-hover-left .fst-hero-slider__arrow--prev,
.fst-hero-slider__arrow--prev:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.fst-hero-slider.is-hover-right .fst-hero-slider__arrow--next,
.fst-hero-slider__arrow--next:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.fst-hero-slider__arrow:hover {
  background: rgba(37, 99, 235, 0.7);
  border-color: rgba(255, 255, 255, 0.45);
}

@media (hover: none) {
  .fst-hero-slider__arrow--prev,
  .fst-hero-slider__arrow--next {
    opacity: 0.85;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }
}

@media (max-width: 640px) {
  .fst-hero-slider__arrow {
    width: 40px;
    height: 40px;
  }

  .fst-hero-slider__arrow--prev {
    left: 0.65rem;
  }

  .fst-hero-slider__arrow--next {
    right: 0.65rem;
  }
}

@keyframes fst-hero-in {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 639px) {
  .fst-hero-slide__stats {
    grid-template-columns: 1fr;
  }

  .fst-hero-slide__stats li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
  }

  .fst-hero-slide__stats strong {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .fst-hero--slider {
    min-height: clamp(36rem, 86vh, 46rem);
  }

  .fst-hero-slide {
    min-height: clamp(36rem, 86vh, 46rem);
  }
}

.fst-mockup {
  background: var(--fst-navy-800);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--fst-radius-xl);
  box-shadow: var(--fst-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.fst-mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--fst-space-2);
  padding: var(--fst-space-3) var(--fst-space-4);
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fst-mockup__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.fst-mockup__dot:nth-child(1) { background: #ef4444; opacity: 0.7; }
.fst-mockup__dot:nth-child(2) { background: #eab308; opacity: 0.7; }
.fst-mockup__dot:nth-child(3) { background: #22c55e; opacity: 0.7; }

.fst-mockup__bar {
  flex: 1;
  margin-left: var(--fst-space-3);
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.fst-mockup__body {
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 280px;
}

.fst-mockup__sidebar {
  padding: var(--fst-space-4) var(--fst-space-2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fst-space-3);
}

.fst-mockup__nav-item {
  width: 32px;
  height: 32px;
  border-radius: var(--fst-radius-sm);
  background: rgba(255, 255, 255, 0.06);
}

.fst-mockup__nav-item.is-active {
  background: rgba(37, 99, 235, 0.4);
}

.fst-mockup__main {
  padding: var(--fst-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
}

.fst-mockup__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fst-space-3);
}

.fst-mockup__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--fst-radius-md);
  padding: var(--fst-space-3);
  min-height: 64px;
}

.fst-mockup__card--wide {
  grid-column: span 2;
  min-height: 120px;
}

.fst-mockup__line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: var(--fst-space-2);
}

.fst-mockup__line--sm {
  width: 40%;
}

.fst-mockup__line--md {
  width: 65%;
}

.fst-mockup__chart {
  height: 80px;
  margin-top: var(--fst-space-2);
  border-radius: var(--fst-radius-sm);
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.25) 0%,
    rgba(6, 182, 212, 0.08) 100%
  );
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.fst-mockup__badge {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-2);
  padding: var(--fst-space-2) var(--fst-space-4);
  background: var(--fst-bg-white);
  color: var(--fst-text-charcoal);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  border-radius: var(--fst-radius-full);
  box-shadow: var(--fst-shadow-md);
  border: 1px solid var(--fst-border);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .fst-hero:not(.fst-hero--slider) {
    padding-block: var(--fst-space-20) var(--fst-space-24);
  }
}

@media (min-width: 1024px) {
  .fst-hero__inner {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--fst-space-16);
  }

  .fst-mockup__body {
    min-height: 320px;
  }
}

/* --------------------------------------------------------------------------
   8. Trust / Logo Strip & Stats
   -------------------------------------------------------------------------- */
.fst-trust {
  padding-block: var(--fst-space-12);
  border-bottom: 1px solid var(--fst-border);
}

.fst-trust .fst-section-head {
  margin-bottom: var(--fst-space-8);
}

.fst-trust__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fst-space-4);
  margin-bottom: var(--fst-space-10);
}

.fst-trust__stack-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fst-text-muted);
}

.fst-trust__pills {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fst-trust__pills .fst-logo-pill {
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  color: var(--fst-navy-800);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fst-trust__pills .fst-logo-pill:hover {
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.04);
}

.fst-trust__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fst-space-4);
}

.fst-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  height: 100%;
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-trust-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.fst-trust-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.35rem;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.08));
  color: var(--fst-blue-600);
}

.fst-trust-stat__icon .fst-icon {
  display: inline-flex;
  line-height: 0;
}

.fst-trust-stat__icon svg,
.fst-trust-stat__icon .fst-icon svg {
  width: 18px;
  height: 18px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-trust-stat__icon .fst-icon svg[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.fst-trust-stat__value {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fst-weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fst-blue-600);
}

.fst-trust-stat__label {
  margin: 0;
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-muted);
}

@media (min-width: 640px) {
  .fst-trust__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .fst-trust__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fst-space-5);
  }
}

.fst-trust__label {
  text-align: center;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-6);
}

.fst-trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fst-space-8) var(--fst-space-10);
}

.fst-trust__logo {
  opacity: 0.45;
  filter: grayscale(1);
  transition:
    opacity var(--fst-duration) var(--fst-ease),
    filter var(--fst-duration) var(--fst-ease);
  max-height: 32px;
  width: auto;
}

.fst-trust__logo:hover {
  opacity: 0.85;
  filter: grayscale(0);
}

/* Stats (shared / about page) */
.fst-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fst-space-6);
}

.fst-stat {
  text-align: center;
  padding: var(--fst-space-6);
}

.fst-stat__value {
  font-size: clamp(2rem, 4vw, var(--fst-text-4xl));
  font-weight: var(--fst-weight-extrabold);
  color: var(--fst-navy-900);
  letter-spacing: var(--fst-tracking-tight);
  line-height: 1;
  margin-bottom: var(--fst-space-2);
}

.fst-stat__value span {
  color: var(--fst-blue-600);
}

.fst-stat__label {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  font-weight: var(--fst-weight-medium);
}

.fst-stats--dark .fst-stat__value {
  color: #fff;
}

.fst-stats--dark .fst-stat__label {
  color: var(--fst-text-inverse-muted);
}

.fst-stats--bordered {
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-xl);
  background: var(--fst-bg-white);
  overflow: hidden;
  min-width: 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fst-stats--bordered::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.fst-stats--bordered .fst-stat {
  border-right: 1px solid var(--fst-border);
  border-bottom: 1px solid var(--fst-border);
  min-width: 0;
  padding: var(--fst-space-5);
}

.fst-stats--bordered .fst-stat:nth-child(2n) {
  border-right: none;
}

/* Side-column stats (About story): keep 2x2 so arrows/scrollbars never appear */
.fst-stats--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fst-stats--compact .fst-stat__value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.fst-stats--compact .fst-stat__label {
  font-size: var(--fst-text-xs);
  line-height: 1.35;
}

@media (min-width: 768px) {
  .fst-stats:not(.fst-stats--compact) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fst-stats--bordered:not(.fst-stats--compact) .fst-stat {
    border-bottom: none;
  }

  .fst-stats--bordered:not(.fst-stats--compact) .fst-stat:nth-child(2n) {
    border-right: 1px solid var(--fst-border);
  }

  .fst-stats--bordered:not(.fst-stats--compact) .fst-stat:last-child {
    border-right: none;
  }

  .fst-stats--compact .fst-stat:nth-child(1),
  .fst-stats--compact .fst-stat:nth-child(2) {
    border-bottom: 1px solid var(--fst-border);
  }

  .fst-stats--compact .fst-stat:nth-child(2n) {
    border-right: none;
  }

  .fst-stats--compact .fst-stat:nth-child(odd) {
    border-right: 1px solid var(--fst-border);
  }
}

/* --------------------------------------------------------------------------
   9. Service Cards
   -------------------------------------------------------------------------- */
.fst-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--fst-space-8);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  box-shadow: var(--fst-shadow-xs);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease);
}

.fst-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fst-shadow-lg);
  border-color: var(--fst-border-strong);
}

.fst-service-card--media {
  padding: 0;
  overflow: hidden;
}

.fst-service-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fst-navy-950);
}

.fst-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 0.8s var(--fst-ease), filter 0.8s var(--fst-ease);
}

.fst-service-card--media:hover .fst-service-card__media img {
  transform: scale(1.08);
  filter: saturate(1.14) contrast(1.06);
}

.fst-service-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.2), transparent 50%);
  pointer-events: none;
}

.fst-service-card__badge {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fst-service-card__badge svg,
.fst-service-card__badge .fst-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.fst-service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--fst-space-5);
}

.fst-service-card__body .fst-card__title {
  margin-bottom: 0.55rem;
}

.fst-service-card__body .fst-card__text {
  flex: 1;
  margin-bottom: var(--fst-space-4);
}

.fst-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--fst-space-5);
  border-radius: var(--fst-radius-md);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.08));
  color: var(--fst-blue-600);
}

.fst-service-card__icon svg,
.fst-service-card__icon .fst-icon svg {
  width: 24px;
  height: 24px;
}

.fst-service-card__title {
  font-size: var(--fst-text-xl);
  margin-bottom: var(--fst-space-3);
}

.fst-service-card__desc {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  line-height: var(--fst-leading-relaxed);
  margin-bottom: var(--fst-space-5);
  flex-grow: 1;
}

.fst-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-2);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-blue-600);
  margin-top: auto;
}
.fst-service-card .fst-link {
  margin-top: auto;
}


.fst-service-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--fst-duration) var(--fst-ease);
}

.fst-service-card:hover .fst-service-card__link svg {
  transform: translateX(4px);
}

.fst-service-card__list {
  margin-bottom: var(--fst-space-5);
}

.fst-service-card__list li {
  position: relative;
  padding-left: var(--fst-space-5);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
  margin-bottom: var(--fst-space-2);
}

.fst-service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fst-blue-500);
}

/* --------------------------------------------------------------------------
   10. Why Us / Benefits Grid
   -------------------------------------------------------------------------- */

.fst-benefit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fst-benefit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--fst-space-5);
  border-radius: var(--fst-radius-md);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.08));
  color: var(--fst-blue-600);
}

.fst-benefit-card__icon svg,
.fst-benefit-card__icon .fst-icon svg {
  width: 24px;
  height: 24px;
  max-width: none;
}

.fst-benefit-card h3 {
  font-size: var(--fst-text-lg);
  margin-bottom: var(--fst-space-2);
}

.fst-benefit-card p {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  line-height: var(--fst-leading-relaxed);
  margin: 0;
}

.fst-check-grid {
  display: grid;
  gap: var(--fst-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fst-check-grid li {
  display: flex;
  align-items: flex-start;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
}

.fst-check-grid .fst-icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--fst-blue-600);
}

.fst-check-grid .fst-icon svg {
  width: 18px;
  height: 18px;
}
.fst-benefits {
  display: grid;
  gap: var(--fst-space-6);
}

.fst-benefit {
  display: flex;
  gap: var(--fst-space-4);
  padding: var(--fst-space-5);
  border-radius: var(--fst-radius-md);
  transition: background var(--fst-duration) var(--fst-ease);
}

.fst-benefit:hover {
  background: var(--fst-bg-slate-50);
}

.fst-benefit__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fst-radius-sm);
  background: var(--fst-navy-900);
  color: var(--fst-cyan-400);
}

.fst-benefit__icon svg {
  width: 20px;
  height: 20px;
}

.fst-benefit__title {
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-semibold);
  margin-bottom: var(--fst-space-1);
}

.fst-benefit__desc {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  line-height: var(--fst-leading-normal);
  margin: 0;
}

.fst-why-us {
  display: grid;
  gap: var(--fst-space-12);
  align-items: center;
}

.fst-why-us__visual {
  position: relative;
  border-radius: var(--fst-radius-xl);
  overflow: hidden;
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-slate-50);
  aspect-ratio: 4 / 3;
}

.fst-why-us__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .fst-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-why-us {
    grid-template-columns: 1fr 1fr;
  }

  .fst-benefits {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. Featured Solutions showcase
   -------------------------------------------------------------------------- */

.fst-section--solutions-feature .fst-section-head,
.fst-section--solutions-feature .fst-section-heading,
.fst-section--dark .fst-section-title {
  color: #fff;
}

.fst-section--solutions-feature .fst-section-text,
.fst-section--dark .fst-section-text {
  color: rgba(226, 232, 240, 0.78);
}

.fst-solutions-showcase {
  display: grid;
  gap: var(--fst-space-6);
  grid-template-columns: 1fr;
}

.fst-solution-showcase {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-solution-showcase:hover {
  transform: translateY(-4px);
  border-color: rgba(147, 197, 253, 0.28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.fst-solution-showcase__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(37, 99, 235, 0.4), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(249, 115, 22, 0.3), transparent 50%),
    var(--fst-navy-900);
  isolation: isolate;
}

.fst-solution-showcase__media::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  pointer-events: none;
  opacity: 0.8;
}

.fst-solution-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.08) brightness(0.96);
  transition: transform 0.85s var(--fst-ease), filter 0.85s var(--fst-ease);
}

.fst-solution-showcase:hover .fst-solution-showcase__media img {
  transform: scale(1.1);
  filter: saturate(1.18) contrast(1.1) brightness(1);
}

.fst-solution-showcase__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.8) 0%, rgba(6, 13, 24, 0.22) 50%, rgba(6, 13, 24, 0.1) 100%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.25), transparent 50%);
  pointer-events: none;
}

.fst-solution-showcase__metric {
  position: absolute;
  left: 1.15rem;
  bottom: 1.15rem;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.45), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.fst-solution-showcase__metric strong {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fst-solution-showcase__metric em {
  color: rgba(226, 232, 240, 0.75);
  font-style: normal;
  font-size: 0.72rem;
}

.fst-solution-showcase__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  flex: 1;
  padding: var(--fst-space-6);
}

.fst-solution-showcase__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.25rem;
  border-radius: 11px;
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
}

.fst-solution-showcase__icon .fst-icon {
  display: inline-flex;
  line-height: 0;
}

.fst-solution-showcase__icon svg,
.fst-solution-showcase__icon .fst-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-solution-showcase__tag {
  margin: 0;
  font-size: 0.7rem;
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
}

.fst-solution-showcase__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}

.fst-solution-showcase__title a {
  color: inherit;
  text-decoration: none;
}

.fst-solution-showcase__title a:hover {
  color: #bfdbfe;
}

.fst-solution-showcase__text {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
  font-size: var(--fst-text-sm);
  line-height: 1.65;
}

.fst-solution-showcase__body > .fst-link {
  margin-top: auto;
  padding-top: var(--fst-space-4);
}

@media (min-width: 700px) {
  .fst-solutions-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .fst-solutions-showcase {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fst-space-5);
  }

  .fst-solution-showcase__body {
    padding: var(--fst-space-5);
  }
}

/* Legacy feature/mock helpers still used elsewhere */
.fst-solutions-grid {
  gap: var(--fst-space-8);
}

.fst-solution-feature {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-5);
  height: 100%;
}

.fst-solution-feature__visual {
  min-height: 220px;
}

.fst-solution-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fst-space-3);
  flex: 1;
}

.fst-solution-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fst-radius-md);
  background: rgba(37, 99, 235, 0.18);
  color: #93c5fd;
}

.fst-solution-feature__icon svg,
.fst-solution-feature__icon .fst-icon svg {
  width: 22px;
  height: 22px;
  max-width: none;
}

.fst-solution-feature h3 {
  margin: 0;
  color: #fff;
  font-size: var(--fst-text-xl);
}

.fst-solution-feature p {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
  font-size: var(--fst-text-sm);
  line-height: var(--fst-leading-relaxed);
  max-width: 36rem;
}

.fst-solution-feature .fst-link {
  margin-top: auto;
}

.fst-mockup--feature .fst-mockup__body {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 180px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(37, 99, 235, 0.22), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(6, 182, 212, 0.12), transparent 45%);
}

.fst-mockup--feature .fst-mockup__body--saas,
.fst-mockup--feature .fst-mockup__body--custom,
.fst-mockup--feature .fst-mockup__body--ops {
  grid-template-columns: 1fr;
}

.fst-mock-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: var(--fst-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fst-mock-panel--accent {
  justify-content: center;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.35), rgba(6, 182, 212, 0.12));
}

.fst-mock-panel--wide {
  min-height: 148px;
}

.fst-mock-panel__label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}

.fst-mock-panel__metric {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.fst-mock-panel__caption {
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.65);
}

.fst-mock-panel__rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.fst-mock-panel__rows span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.fst-mock-panel__rows span:nth-child(1) { width: 88%; }
.fst-mock-panel__rows span:nth-child(2) { width: 72%; }
.fst-mock-panel__rows span:nth-child(3) { width: 64%; }
.fst-mock-panel__rows span.is-active {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.85), rgba(34, 211, 238, 0.45));
}

.fst-mock-panel__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 48px;
  margin-top: 0.35rem;
}

.fst-mock-panel__bars i {
  flex: 1;
  display: block;
  border-radius: 3px 3px 0 0;
  background: rgba(147, 197, 253, 0.55);
}

.fst-mock-panel__bars i:nth-child(1) { height: 35%; }
.fst-mock-panel__bars i:nth-child(2) { height: 58%; }
.fst-mock-panel__bars i:nth-child(3) { height: 45%; }
.fst-mock-panel__bars i:nth-child(4) { height: 78%; }
.fst-mock-panel__bars i:nth-child(5) { height: 92%; background: rgba(34, 211, 238, 0.7); }

.fst-mock-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.fst-mock-panel__stats span {
  display: block;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.fst-mock-panel__stats span:nth-child(2) {
  background: rgba(37, 99, 235, 0.35);
}

.fst-mock-panel__chart {
  flex: 1;
  min-height: 64px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 40%, rgba(37, 99, 235, 0.2)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.04) 18px,
      rgba(255, 255, 255, 0.04) 19px
    );
  position: relative;
  overflow: hidden;
}

.fst-mock-panel__chart::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.2), #60a5fa, #22d3ee);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}

.fst-mock-panel__ticket {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fst-mock-panel__ticket span {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.fst-mock-panel__ticket span:nth-child(1) { width: 80%; }
.fst-mock-panel__ticket span:nth-child(2) { width: 65%; }
.fst-mock-panel__ticket span:nth-child(3) { width: 72%; }

.fst-mock-panel__total {
  display: block;
  margin-top: auto;
  height: 14px;
  width: 45%;
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.55);
}

.fst-mock-panel__kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  flex: 1;
}

.fst-mock-panel__kanban span {
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  min-height: 96px;
  position: relative;
}

.fst-mock-panel__kanban span::before,
.fst-mock-panel__kanban span::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.fst-mock-panel__kanban span::before { top: 12px; }
.fst-mock-panel__kanban span::after { top: 28px; width: 60%; right: auto; }
.fst-mock-panel__kanban span:nth-child(2) {
  background: rgba(37, 99, 235, 0.22);
}
/* --------------------------------------------------------------------------
   11b. Solutions catalog page
   -------------------------------------------------------------------------- */

.fst-page-hero--solutions {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
  min-height: clamp(22rem, 48vw, 30rem);
  display: flex;
  align-items: center;
}

.fst-page-hero--solutions .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--solutions .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.06) brightness(0.6);
}

.fst-page-hero--solutions .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.72) 38%, rgba(6, 13, 24, 0.4) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.32), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(249, 115, 22, 0.14), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--solutions .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fst-page-hero--solutions .fst-page-hero__copy {
  max-width: 40rem;
}

.fst-page-hero--solutions .fst-page-hero__title {
  max-width: 15ch;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.fst-page-hero--solutions .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  max-width: 48ch;
}

.fst-page-hero--solutions .fst-hero__actions {
  margin-top: 0;
}

.fst-solutions-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.fst-solutions-hero__chips li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .fst-page-hero--solutions {
    padding-block: var(--fst-space-14) 4rem;
  }
}

/* --------------------------------------------------------------------------
   11c. Single solution page
   -------------------------------------------------------------------------- */

.fst-page-hero--solution {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
}

.fst-page-hero--solution .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--solution .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.05) brightness(0.55);
}

.fst-page-hero--solution .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.92) 0%, rgba(6, 13, 24, 0.78) 42%, rgba(6, 13, 24, 0.45) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(37, 99, 235, 0.35), transparent 45%),
    radial-gradient(ellipse at 70% 90%, rgba(249, 115, 22, 0.18), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--solution .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--fst-space-8);
  align-items: center;
}

.fst-page-hero--solution .fst-page-hero__copy {
  max-width: 36rem;
}

.fst-page-hero--solution .fst-page-hero__title {
  max-width: 14ch;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.fst-page-hero--solution .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 40ch;
}

.fst-page-hero--solution .fst-page-hero__visual {
  justify-self: stretch;
}

.fst-solution-hero__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 4 / 3;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.fst-solution-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.06);
  transition: transform 0.9s var(--fst-ease);
}

.fst-page-hero--solution:hover .fst-solution-hero__frame img {
  transform: scale(1.04);
}

.fst-solution-hero__frame-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.55) 0%, transparent 50%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.2), transparent 50%);
  pointer-events: none;
}

.fst-solution-hero__frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  pointer-events: none;
}

.fst-solution-hero__badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem 0.55rem 0.55rem;
  border-radius: 999px;
  color: #eff6ff;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.fst-solution-hero__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.7), rgba(15, 23, 42, 0.85));
  color: #dbeafe;
}

.fst-solution-hero__badge-icon svg,
.fst-solution-hero__badge-icon .fst-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.fst-solution-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.fst-solution-hero__signals li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 900px) {
  .fst-page-hero--solution .fst-page-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--fst-space-12);
  }
}

@media (max-width: 899px) {
  .fst-page-hero--solution .fst-page-hero__visual {
    order: -1;
  }

  .fst-solution-hero__frame {
    aspect-ratio: 16 / 10;
    max-width: 34rem;
  }
}

.fst-section--solution-intro {
  padding-top: var(--fst-space-10);
  padding-bottom: var(--fst-space-10);
}

.fst-solution-intro {
  display: grid;
  gap: var(--fst-space-8);
  align-items: start;
}

.fst-solution-intro__copy {
  max-width: 52rem;
}

.fst-solution-intro__copy p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fst-slate-700, #334155);
}

.fst-solution-intro__panel {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.02)),
    #fff;
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.fst-solution-intro__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.fst-solution-intro__stat strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #eff6ff;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
}

.fst-solution-intro__stat span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fst-navy-950, #0f172a);
  line-height: 1.35;
}

@media (min-width: 900px) {
  .fst-solution-intro {
    grid-template-columns: 1.35fr 0.85fr;
    gap: var(--fst-space-10);
  }
}

.fst-solution-pillars {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fst-solution-pillar {
  padding: 1.15rem 1.2rem;
  border-radius: 1.05rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-solution-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.fst-solution-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.85rem;
  border-radius: 12px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.14);
}

.fst-solution-pillar__icon svg,
.fst-solution-pillar__icon .fst-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.fst-solution-pillar h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--fst-navy-950, #0f172a);
}

.fst-solution-pillar p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fst-slate-600, #475569);
}

@media (min-width: 900px) {
  .fst-solution-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fst-solution-duo {
  display: grid;
  gap: 1rem;
}

.fst-solution-duo__card {
  padding: 1.4rem 1.5rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.fst-solution-duo__card--accent {
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.95)),
    #fff;
  border-color: rgba(37, 99, 235, 0.18);
}

.fst-solution-duo__card h2 {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}

.fst-solution-duo__card p:last-child {
  margin: 0;
  color: var(--fst-slate-600, #475569);
  line-height: 1.65;
}

@media (min-width: 800px) {
  .fst-solution-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.fst-section--solutions {
  padding-top: var(--fst-space-10);
  padding-bottom: var(--fst-space-12);
}

.fst-section--solutions .fst-section-head {
  margin-bottom: var(--fst-space-8);
}

.fst-solutions-catalog {
  display: grid;
  gap: var(--fst-space-5);
}

.fst-solution-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease);
}

.fst-solution-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.fst-solution-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(37, 99, 235, 0.35), transparent 55%),
    radial-gradient(90% 70% at 90% 100%, rgba(249, 115, 22, 0.28), transparent 50%),
    var(--fst-navy-950);
  text-decoration: none;
  isolation: isolate;
}

.fst-solution-card__frame {
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--fst-duration) var(--fst-ease), inset var(--fst-duration) var(--fst-ease);
}

.fst-solution-card:hover .fst-solution-card__frame {
  opacity: 1;
  inset: 8px;
}

.fst-solution-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.9s var(--fst-ease), filter 0.9s var(--fst-ease);
  filter: saturate(1.12) contrast(1.08) brightness(0.96);
}

.fst-solution-card:hover .fst-solution-card__visual img {
  transform: scale(1.12);
  filter: saturate(1.18) contrast(1.1) brightness(1);
}

.fst-solution-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.82) 0%, rgba(6, 13, 24, 0.28) 42%, rgba(6, 13, 24, 0.12) 100%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.28), transparent 48%),
    linear-gradient(225deg, rgba(249, 115, 22, 0.16), transparent 40%);
  pointer-events: none;
}

.fst-solution-card__glow {
  position: absolute;
  inset: auto -20% -35% -20%;
  height: 55%;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.35), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.8s var(--fst-ease);
}

.fst-solution-card:hover .fst-solution-card__glow {
  opacity: 0.9;
}

.fst-solution-card__chip {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  z-index: 4;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #eff6ff;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.fst-solution-card__icon {
  position: absolute;
  left: 1.15rem;
  bottom: 1.15rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.55), rgba(15, 23, 42, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #dbeafe;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--fst-duration) var(--fst-ease);
}

.fst-solution-card:hover .fst-solution-card__icon {
  transform: translateY(-2px);
}

.fst-solution-card__icon .fst-icon {
  display: inline-flex;
  line-height: 0;
}

.fst-solution-card__icon svg,
.fst-solution-card__icon .fst-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-solution-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--fst-space-6);
}

.fst-solution-card__body > .fst-eyebrow {
  margin-bottom: 0.35rem;
}

.fst-solution-card__title {
  margin: 0 0 var(--fst-space-4);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fst-navy-950);
}

.fst-solution-card__title a {
  color: inherit;
  text-decoration: none;
}

.fst-solution-card__title a:hover {
  color: var(--fst-blue-700);
}

.fst-solution-card__block {
  width: 100%;
  margin-bottom: var(--fst-space-3);
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: var(--fst-bg-slate-50);
  border: 1px solid transparent;
}

.fst-solution-card__block--accent {
  background: rgba(37, 99, 235, 0.05);
  border-color: rgba(37, 99, 235, 0.1);
}

.fst-solution-card__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fst-blue-600);
}

.fst-solution-card__block p {
  margin: 0;
  font-size: var(--fst-text-sm);
  line-height: 1.6;
  color: var(--fst-text-muted);
}

.fst-solution-card__body > .fst-link {
  margin-top: var(--fst-space-3);
}

@media (min-width: 900px) {
  .fst-solutions-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fst-space-6);
  }

  .fst-solution-card__body {
    padding: var(--fst-space-6) var(--fst-space-6) var(--fst-space-5);
  }
}

.fst-solution {
  display: grid;
  gap: var(--fst-space-10);
  align-items: center;
  padding-block: var(--fst-space-12);
}

.fst-solution:not(:last-child) {
  border-bottom: 1px solid var(--fst-border);
}

.fst-solution__content {
  max-width: 480px;
}

.fst-solution__title {
  margin-bottom: var(--fst-space-4);
}

.fst-solution__desc {
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-6);
}

.fst-solution__features {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
  margin-bottom: var(--fst-space-6);
}

.fst-solution__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
}

.fst-solution__feature-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--fst-blue-600);
  margin-top: 1px;
}

.fst-solution__feature-check svg {
  width: 12px;
  height: 12px;
}

.fst-solution__panel {
  background: var(--fst-bg-slate-50);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-xl);
  padding: var(--fst-space-4);
  box-shadow: var(--fst-shadow-md);
  overflow: hidden;
}

.fst-solution__panel img {
  width: 100%;
  border-radius: var(--fst-radius-md);
}

.fst-solution--reverse .fst-solution__content {
  order: 0;
}

@media (min-width: 1024px) {
  .fst-solution {
    grid-template-columns: 1fr 1fr;
    gap: var(--fst-space-16);
  }

  .fst-solution--reverse .fst-solution__content {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   12. Process Timeline / Steps
   -------------------------------------------------------------------------- */
.fst-process {
  display: grid;
  gap: var(--fst-space-5);
  counter-reset: fst-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fst-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fst-space-3);
  height: 100%;
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  counter-increment: fst-step;
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease);
}

.fst-process__step:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.fst-process__number,
.fst-process__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--fst-blue-600), var(--fst-navy-800));
  color: #fff;
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-bold);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.fst-process__number::before {
  content: counter(fst-step, decimal-leading-zero);
}

.fst-process__title {
  display: block;
  font-size: 1.1rem;
  font-weight: var(--fst-weight-bold);
  margin: 0;
  color: var(--fst-navy-900);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.fst-process__desc {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin: 0;
  line-height: 1.6;
}

.fst-process--cards,
.fst-process--grid {
  grid-template-columns: 1fr;
}

.fst-process--grid .fst-process__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .fst-process--cards,
  .fst-process--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .fst-process--cards,
  .fst-process--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fst-space-5);
  }
}

@media (min-width: 1200px) {
  .fst-process--cards,
  .fst-process--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Horizontal timeline (desktop) */
.fst-process--timeline {
  position: relative;
}

@media (min-width: 768px) {
  .fst-process--timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fst-space-4);
  }

  .fst-process--timeline::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--fst-blue-600), var(--fst-cyan-500));
    opacity: 0.25;
    z-index: 0;
  }

  .fst-process--timeline .fst-process__step {
    text-align: center;
    align-items: center;
    background: transparent;
    border: none;
    padding: var(--fst-space-4) var(--fst-space-2);
    z-index: 1;
    box-shadow: none;
    transform: none;
  }

  .fst-process--timeline .fst-process__step:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }

  .fst-process--timeline .fst-process__number {
    margin-inline: auto;
    box-shadow: 0 0 0 6px var(--fst-bg-white);
  }
}
/* --------------------------------------------------------------------------
   13. Industry Chips / Cards
   -------------------------------------------------------------------------- */
.fst-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  justify-content: center;
}

.fst-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-2);
  padding: var(--fst-space-2) var(--fst-space-4);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-full);
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-chip:hover,
.fst-chip.is-active {
  border-color: var(--fst-blue-500);
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.05);
  box-shadow: var(--fst-shadow-xs);
}

.fst-chip svg {
  width: 16px;
  height: 16px;
  color: var(--fst-blue-600);
}

.fst-industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
  height: 100%;
}

.fst-industry-card:hover {
  border-color: var(--fst-border-strong);
  box-shadow: var(--fst-shadow-md);
}

.fst-industry-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--fst-space-4);
  color: var(--fst-blue-600);
}

.fst-industry-card__title {
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-semibold);
  margin-bottom: var(--fst-space-2);
}

.fst-industry-card__desc {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   13b. Industry chips + detail blocks
   -------------------------------------------------------------------------- */

.fst-page-hero--industries {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
  min-height: clamp(22rem, 48vw, 30rem);
  display: flex;
  align-items: center;
}

.fst-page-hero--industries .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--industries .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  transform: scale(1.04);
  filter: saturate(1.1) contrast(1.05) brightness(0.6);
}

.fst-page-hero--industries .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.72) 38%, rgba(6, 13, 24, 0.4) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.3), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(249, 115, 22, 0.14), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--industries .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fst-page-hero--industries .fst-page-hero__copy {
  max-width: 40rem;
}

.fst-page-hero--industries .fst-page-hero__title {
  max-width: 16ch;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.fst-page-hero--industries .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  max-width: 46ch;
}

.fst-page-hero--industries .fst-hero__actions {
  margin-top: 0;
}

.fst-industries-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.fst-industries-hero__chips li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .fst-page-hero--industries {
    padding-block: var(--fst-space-14) 4rem;
  }
}

/* --------------------------------------------------------------------------
   13c. Services archive / overview hero
   -------------------------------------------------------------------------- */

.fst-page-hero--services {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
  min-height: clamp(22rem, 48vw, 30rem);
  display: flex;
  align-items: center;
}

.fst-page-hero--services .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--services .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.06) brightness(0.62);
}

.fst-page-hero--services .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.72) 38%, rgba(6, 13, 24, 0.42) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.32), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(249, 115, 22, 0.16), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--services .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fst-page-hero--services .fst-page-hero__copy {
  max-width: 40rem;
}

.fst-page-hero--services .fst-page-hero__title {
  max-width: 14ch;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.fst-page-hero--services .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  max-width: 44ch;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

.fst-services-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.fst-services-hero__chips li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .fst-page-hero--services {
    padding-block: var(--fst-space-14) 4rem;
  }
}

.fst-industry-nav {
  position: sticky;
  top: var(--fst-header-height-scrolled);
  z-index: 50;
  padding-block: 0.7rem;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--fst-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fst-industry-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.fst-industry-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-white);
  color: var(--fst-navy-800);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration-fast) var(--fst-ease);
}

.fst-industry-chip:hover {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.fst-section--industries {
  padding-top: var(--fst-space-10);
  padding-bottom: var(--fst-space-12);
}

.fst-section--industries .fst-section-head {
  margin-bottom: var(--fst-space-8);
}

.fst-industry-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fst-space-5);
}

.fst-industry-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease);
}

.fst-industry-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.fst-industry-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--fst-space-4);
}

.fst-industry-tile__index {
  font-size: 0.7rem;
  font-weight: var(--fst-weight-bold);
  letter-spacing: 0.1em;
  color: rgba(37, 99, 235, 0.5);
}

.fst-industry-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.08));
  color: var(--fst-blue-600);
}

.fst-industry-tile__icon .fst-icon {
  display: inline-flex;
  line-height: 0;
}

.fst-industry-tile__icon svg,
.fst-industry-tile__icon .fst-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-industry-tile > .fst-eyebrow {
  margin-bottom: 0.3rem;
}

.fst-industry-tile__title {
  margin: 0 0 var(--fst-space-3);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fst-navy-950);
}

.fst-industry-tile__text {
  margin: 0 0 var(--fst-space-4);
  color: var(--fst-text-muted);
  font-size: var(--fst-text-sm);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fst-industry-tile__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--fst-space-4);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.1);
}

.fst-industry-tile__metric strong {
  color: var(--fst-blue-700);
  font-size: 0.95rem;
}

.fst-industry-tile__metric span {
  color: var(--fst-text-muted);
  font-size: 0.72rem;
}

.fst-industry-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--fst-space-5);
}

.fst-industry-tile__tag {
  display: inline-flex;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: var(--fst-bg-slate-50);
  color: var(--fst-navy-800);
  font-size: 0.7rem;
  font-weight: var(--fst-weight-medium);
}

.fst-industry-tile > .fst-link {
  margin-top: auto;
}

@media (min-width: 640px) {
  .fst-industry-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fst-industry-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fst-space-6);
  }
}

@media (min-width: 1280px) {
  .fst-industry-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* --------------------------------------------------------------------------
   14. Portfolio Cards + Filters
   -------------------------------------------------------------------------- */
.fst-portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-2);
  margin-bottom: var(--fst-space-10);
  justify-content: center;
}

.fst-filter-btn {
  padding: var(--fst-space-2) var(--fst-space-4);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fst-radius-full);
  transition:
    color var(--fst-duration-fast) var(--fst-ease),
    background var(--fst-duration-fast) var(--fst-ease),
    border-color var(--fst-duration-fast) var(--fst-ease);
}

.fst-filter-btn:hover {
  color: var(--fst-text-charcoal);
  background: var(--fst-bg-slate-100);
}

.fst-filter-btn.is-active {
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
}

.fst-portfolio-grid {
  display: grid;
  gap: var(--fst-space-6);
  grid-template-columns: 1fr;
}

.fst-portfolio-card {
  position: relative;
  border-radius: var(--fst-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-white);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fst-shadow-lg);
}

.fst-portfolio-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fst-navy-800);
}

.fst-portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fst-duration-slow) var(--fst-ease);
}

.fst-portfolio-card:hover .fst-portfolio-card__media img {
  transform: scale(1.04);
}

.fst-portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 13, 24, 0.7) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--fst-duration) var(--fst-ease);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--fst-space-4);
}

.fst-portfolio-card:hover .fst-portfolio-card__overlay {
  opacity: 1;
}

.fst-portfolio-card__body {
  padding: var(--fst-space-5);
}

.fst-portfolio-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-2);
  margin-bottom: var(--fst-space-2);
  font-size: var(--fst-text-xs);
  color: var(--fst-text-muted);
}

.fst-portfolio-card__meta span + span::before {
  content: "\00B7";
  margin-right: var(--fst-space-2);
  color: var(--fst-border-strong);
}

.fst-portfolio-card__placeholder {
  height: 100%;
  min-height: 100%;
}

.fst-portfolio-card__media .fst-mockup--card {
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.fst-portfolio-card__media .fst-mockup__body {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 0;
  height: calc(100% - 46px);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(37, 99, 235, 0.28), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(6, 182, 212, 0.14), transparent 50%),
    var(--fst-navy-900);
}

.fst-portfolio-card__media .fst-mockup__body--saas,
.fst-portfolio-card__media .fst-mockup__body--ops {
  grid-template-columns: 1fr;
}

.fst-portfolio-card__placeholder--finance .fst-mockup__body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.35), transparent 50%),
    var(--fst-navy-900);
}

.fst-portfolio-card__placeholder--pos .fst-mockup__body {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(249, 115, 22, 0.22), transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(37, 99, 235, 0.25), transparent 50%),
    var(--fst-navy-900);
}

.fst-portfolio-card__placeholder--saas .fst-mockup__body {
  background:
    radial-gradient(ellipse at 30% 10%, rgba(168, 85, 247, 0.2), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(34, 211, 238, 0.18), transparent 45%),
    var(--fst-navy-900);
}

.fst-portfolio-card .fst-card__title {
  font-size: var(--fst-text-lg);
  margin-bottom: var(--fst-space-2);
}

.fst-portfolio-card .fst-card__title a {
  color: var(--fst-blue-700);
}

.fst-portfolio-card .fst-card__text {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-4);
}

.fst-portfolio-card__tag {
  display: inline-block;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-blue-600);
  margin-bottom: var(--fst-space-2);
}

.fst-portfolio-card__title {
  font-size: var(--fst-text-lg);
  margin-bottom: var(--fst-space-2);
}

.fst-portfolio-card__excerpt {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .fst-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.fst-testimonials {
  display: grid;
  gap: var(--fst-space-6);
}

.fst-testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--fst-space-8);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  box-shadow: var(--fst-shadow-xs);
}

.fst-testimonial__quote {
  font-size: var(--fst-text-base);
  line-height: var(--fst-leading-relaxed);
  color: var(--fst-text-slate);
  margin-bottom: var(--fst-space-6);
  flex-grow: 1;
  position: relative;
}

.fst-testimonial__quote::before {
  content: "\201C";
  display: block;
  font-size: 3rem;
  line-height: 1;
  color: var(--fst-blue-500);
  opacity: 0.35;
  font-weight: var(--fst-weight-bold);
  margin-bottom: var(--fst-space-2);
}

.fst-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--fst-space-3);
  padding-top: var(--fst-space-5);
  border-top: 1px solid var(--fst-border);
}

.fst-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fst-bg-slate-100);
  border: 2px solid var(--fst-border);
}

.fst-testimonial__name {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-text-charcoal);
}

.fst-testimonial__role {
  font-size: var(--fst-text-xs);
  color: var(--fst-text-muted);
}

.fst-testimonial__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--fst-space-4);
  color: #f59e0b;
}

.fst-testimonial__stars svg {
  width: 16px;
  height: 16px;
}

.fst-testimonials-slider {
  position: relative;
}

.fst-testimonials-slider__nav {
  display: flex;
  gap: var(--fst-space-2);
  justify-content: center;
  margin-top: var(--fst-space-8);
}

.fst-testimonials-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fst-border-strong);
  transition: background var(--fst-duration) var(--fst-ease), width var(--fst-duration) var(--fst-ease);
}

.fst-testimonials-slider__dot.is-active {
  width: 24px;
  border-radius: 4px;
  background: var(--fst-blue-600);
}

@media (min-width: 768px) {
  .fst-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   16. CTA Band (Dark Navy)
   -------------------------------------------------------------------------- */
.fst-cta-band {
  position: relative;
  padding-block: var(--fst-space-16);
  background: linear-gradient(135deg, var(--fst-navy-950) 0%, var(--fst-navy-800) 55%, var(--fst-navy-700) 100%);
  overflow: hidden;
  text-align: center;
}

.fst-cta-band::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.fst-cta-band::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.fst-cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.fst-cta-band__copy {
  margin-bottom: var(--fst-space-8);
}

.fst-cta-band__title,
.fst-cta-band h2 {
  color: #fff;
  margin-bottom: var(--fst-space-4);
}

.fst-cta-band__text,
.fst-cta-band p {
  color: rgba(226, 232, 240, 0.82);
  font-size: var(--fst-text-lg);
  margin: 0 auto;
  max-width: 36rem;
  line-height: var(--fst-leading-relaxed);
}

.fst-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  justify-content: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   17. Footer Multi-Column
   -------------------------------------------------------------------------- */
.fst-footer {
  background: var(--fst-navy-950);
  color: var(--fst-text-inverse-muted);
  padding-top: var(--fst-space-16);
}

.fst-footer a {
  color: var(--fst-text-inverse-muted);
  transition: color var(--fst-duration-fast) var(--fst-ease);
}

.fst-footer a:hover {
  color: #fff;
}

.fst-footer__grid {
  display: grid;
  gap: var(--fst-space-10);
  padding-bottom: var(--fst-space-12);
}

.fst-footer__brand {
  max-width: 300px;
}

.fst-footer__brand .fst-logo {
  margin-bottom: var(--fst-space-4);
  color: #fff;
}

.fst-logo--footer .fst-logo__tech {
  color: rgba(255, 255, 255, 0.55);
}

.fst-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-2);
  margin-bottom: var(--fst-space-4);
  color: #fff;
  font-size: var(--fst-text-lg);
  font-weight: var(--fst-weight-extrabold);
  text-decoration: none;
}

.fst-footer__logo:hover {
  color: #fff;
}

.fst-footer__logo span {
  color: var(--fst-blue-500);
}

.fst-footer__tagline {
  font-size: var(--fst-text-sm);
  line-height: var(--fst-leading-relaxed);
  margin-bottom: var(--fst-space-5);
}

.fst-footer__social {
  display: flex;
  gap: var(--fst-space-2);
}

.fst-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fst-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--fst-text-inverse-muted);
}

.fst-footer__social a:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.4);
  color: #fff;
}

.fst-footer__social svg,
.fst-footer__social .fst-icon svg {
  width: 18px;
  height: 18px;
  max-width: none;
}

.fst-footer__title,
.fst-footer__col-title {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: #fff;
  margin-bottom: var(--fst-space-4);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
}

.fst-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-sm);
}

.fst-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
}

.fst-footer__links a {
  font-size: var(--fst-text-sm);
}

.fst-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-sm);
  margin-bottom: var(--fst-space-3);
}

.fst-footer__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--fst-cyan-400);
}

.fst-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-4);
  align-items: center;
  padding-block: var(--fst-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fst-text-xs);
  text-align: center;
}

.fst-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-4);
  justify-content: center;
}

@media (min-width: 640px) {
  .fst-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-footer__grid {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  }

  .fst-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   18. Page Hero (Inner Pages)
   -------------------------------------------------------------------------- */
.fst-page-hero {
  position: relative;
  padding-block: var(--fst-space-12) var(--fst-space-16);
  background: linear-gradient(160deg, var(--fst-navy-950) 0%, var(--fst-navy-800) 100%);
  overflow: hidden;
}

.fst-page-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.8;
  pointer-events: none;
}

.fst-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.fst-page-hero__title,
.fst-page-hero h1,
.fst-page-hero h2 {
  color: #fff;
  margin-bottom: var(--fst-space-4);
}

.fst-page-hero__subtitle,
.fst-page-hero__lead,
.fst-page-hero p:not(.fst-eyebrow) {
  font-size: var(--fst-text-lg);
  color: rgba(226, 232, 240, 0.82);
  margin: 0;
  max-width: 52ch;
}

.fst-page-hero .fst-eyebrow {
  color: #93c5fd;
}


.fst-page-hero--split .fst-page-hero__layout {
  display: grid;
  gap: var(--fst-space-10);
  align-items: center;
}

.fst-page-hero__copy {
  max-width: 36rem;
}

.fst-page-hero__visual {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-4);
}

.fst-page-hero__visual .fst-mockup--feature {
  min-height: 240px;
}

.fst-page-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fst-space-3);
}

.fst-page-hero__metrics > div {
  padding: var(--fst-space-4);
  border-radius: var(--fst-radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.fst-page-hero__metrics strong {
  display: block;
  color: #fff;
  font-size: var(--fst-text-xl);
  font-weight: var(--fst-weight-extrabold);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.fst-page-hero__metrics span {
  color: rgba(226, 232, 240, 0.7);
  font-size: var(--fst-text-xs);
}

.fst-page-hero .fst-btn--outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.fst-page-hero .fst-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

@media (min-width: 1024px) {
  .fst-page-hero--split .fst-page-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--fst-space-12);
  }
}

/* Shared photo heroes: portfolio / about / contact / blog */
.fst-page-hero--portfolio,
.fst-page-hero--about,
.fst-page-hero--contact,
.fst-page-hero--blog {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
  min-height: clamp(20rem, 44vw, 28rem);
  display: flex;
  align-items: center;
}

.fst-page-hero--portfolio .fst-page-hero__photo,
.fst-page-hero--about .fst-page-hero__photo,
.fst-page-hero--contact .fst-page-hero__photo,
.fst-page-hero--blog .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--portfolio .fst-page-hero__photo img,
.fst-page-hero--about .fst-page-hero__photo img,
.fst-page-hero--contact .fst-page-hero__photo img,
.fst-page-hero--blog .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  filter: saturate(1.1) contrast(1.05) brightness(0.58);
}

.fst-page-hero--portfolio .fst-page-hero__veil,
.fst-page-hero--about .fst-page-hero__veil,
.fst-page-hero--contact .fst-page-hero__veil,
.fst-page-hero--blog .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.72) 40%, rgba(6, 13, 24, 0.4) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.3), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(249, 115, 22, 0.14), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--portfolio .fst-page-hero__layout,
.fst-page-hero--about .fst-page-hero__layout,
.fst-page-hero--contact .fst-page-hero__layout,
.fst-page-hero--blog .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fst-page-hero--portfolio .fst-page-hero__title,
.fst-page-hero--about .fst-page-hero__title,
.fst-page-hero--contact .fst-page-hero__title,
.fst-page-hero--blog .fst-page-hero__title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.fst-page-hero--portfolio .fst-page-hero__lead,
.fst-page-hero--about .fst-page-hero__lead,
.fst-page-hero--contact .fst-page-hero__lead,
.fst-page-hero--blog .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

/* Blog hero keeps the floating-article artwork brighter on the right,
   while the copy side stays dark enough for white text. */
.fst-page-hero--blog {
  min-height: clamp(22rem, 48vw, 30rem);
  background: #04070d;
}

.fst-page-hero--blog .fst-page-hero__photo img {
  object-position: 62% center;
  transform: scale(1.02);
  filter: saturate(1.15) contrast(1.08) brightness(0.82);
}

.fst-page-hero--blog .fst-page-hero__veil {
  background:
    linear-gradient(100deg, rgba(4, 7, 13, 0.94) 0%, rgba(4, 7, 13, 0.8) 34%, rgba(4, 7, 13, 0.18) 68%, rgba(4, 7, 13, 0.05) 100%),
    linear-gradient(to top, rgba(4, 7, 13, 0.6), transparent 42%),
    radial-gradient(ellipse at 78% 22%, rgba(37, 99, 235, 0.24), transparent 52%),
    radial-gradient(ellipse at 95% 12%, rgba(249, 115, 22, 0.16), transparent 42%);
}

@media (max-width: 767px) {
  .fst-page-hero--blog .fst-page-hero__photo img {
    object-position: 72% center;
    filter: saturate(1.15) contrast(1.08) brightness(0.6);
  }

  .fst-page-hero--blog .fst-page-hero__veil {
    background:
      linear-gradient(180deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.7) 55%, rgba(4, 7, 13, 0.86) 100%),
      radial-gradient(ellipse at 75% 20%, rgba(37, 99, 235, 0.22), transparent 55%);
  }
}

.fst-page-hero--about {
  min-height: clamp(24rem, 52vw, 32rem);
}

.fst-page-hero--about .fst-page-hero__visual {
  position: relative;
  z-index: 1;
}

.fst-page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.fst-page-hero__chips li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .fst-page-hero--portfolio,
  .fst-page-hero--about,
  .fst-page-hero--contact,
  .fst-page-hero--blog {
    padding-block: var(--fst-space-14) 4rem;
  }
}

.fst-page-hero--centered {
  text-align: center;
}

.fst-page-hero--centered .fst-page-hero__inner {
  margin-inline: auto;
}

.fst-page-hero--centered .fst-page-hero__subtitle {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .fst-page-hero {
    padding-block: var(--fst-space-16) var(--fst-space-20);
  }
}

/* --------------------------------------------------------------------------
   19. Breadcrumbs
   -------------------------------------------------------------------------- */
.fst-breadcrumbs {
  padding-block: var(--fst-space-4);
  background: var(--fst-bg-white);
  border-bottom: 1px solid var(--fst-border);
}

.fst-breadcrumbs .fst-breadcrumbs__list,
.fst-breadcrumbs ol.fst-breadcrumbs__list,
.fst-breadcrumbs ol {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--fst-text-sm);
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.fst-breadcrumbs .fst-breadcrumbs__item,
.fst-breadcrumbs li {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  color: var(--fst-text-muted);
  float: none;
  width: auto;
  max-width: 100%;
}

.fst-breadcrumbs__item a,
.fst-breadcrumbs li a {
  color: var(--fst-blue-600);
}

.fst-breadcrumbs__item a:hover,
.fst-breadcrumbs li a:hover {
  color: var(--fst-blue-700);
}

.fst-breadcrumbs__sep {
  color: var(--fst-border-strong);
  font-size: 0.85em;
  line-height: 1;
}

.fst-breadcrumbs__item--current,
.fst-breadcrumbs__item--current span {
  color: var(--fst-text-charcoal);
  font-weight: var(--fst-weight-medium);
}

.fst-page-hero .fst-breadcrumbs {
  padding-top: 0;
  padding-bottom: var(--fst-space-5);
}

.fst-page-hero .fst-breadcrumbs__item,
.fst-page-hero .fst-breadcrumbs__item a {
  color: var(--fst-text-inverse-muted);
}

.fst-page-hero .fst-breadcrumbs__item a:hover {
  color: #fff;
}

.fst-page-hero .fst-breadcrumbs__item--current {
  color: #fff;
}

.fst-page-hero .fst-breadcrumbs__sep {
  color: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   20. FAQ Accordion
   -------------------------------------------------------------------------- */
.fst-page-hero--faq,
.fst-page-hero--quote,
.fst-page-hero--careers,
.fst-page-hero--technologies,
.fst-page-hero--legal {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
  min-height: clamp(20rem, 44vw, 28rem);
  display: flex;
  align-items: center;
}

.fst-page-hero--faq .fst-page-hero__photo,
.fst-page-hero--quote .fst-page-hero__photo,
.fst-page-hero--careers .fst-page-hero__photo,
.fst-page-hero--technologies .fst-page-hero__photo,
.fst-page-hero--legal .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--faq .fst-page-hero__photo img,
.fst-page-hero--quote .fst-page-hero__photo img,
.fst-page-hero--careers .fst-page-hero__photo img,
.fst-page-hero--technologies .fst-page-hero__photo img,
.fst-page-hero--legal .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  filter: saturate(1.1) contrast(1.05) brightness(0.58);
}

.fst-page-hero--faq .fst-page-hero__veil,
.fst-page-hero--quote .fst-page-hero__veil,
.fst-page-hero--careers .fst-page-hero__veil,
.fst-page-hero--technologies .fst-page-hero__veil,
.fst-page-hero--legal .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.72) 40%, rgba(6, 13, 24, 0.4) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(37, 99, 235, 0.3), transparent 45%);
  pointer-events: none;
}

.fst-page-hero--faq .fst-page-hero__layout,
.fst-page-hero--quote .fst-page-hero__layout,
.fst-page-hero--careers .fst-page-hero__layout,
.fst-page-hero--technologies .fst-page-hero__layout,
.fst-page-hero--legal .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
}

.fst-page-hero--faq .fst-page-hero__title,
.fst-page-hero--quote .fst-page-hero__title,
.fst-page-hero--careers .fst-page-hero__title,
.fst-page-hero--technologies .fst-page-hero__title,
.fst-page-hero--legal .fst-page-hero__title {
  max-width: 15ch;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.fst-page-hero--faq .fst-page-hero__lead,
.fst-page-hero--quote .fst-page-hero__lead,
.fst-page-hero--careers .fst-page-hero__lead,
.fst-page-hero--technologies .fst-page-hero__lead,
.fst-page-hero--legal .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  max-width: 46ch;
}

@media (min-width: 768px) {
  .fst-page-hero--faq,
  .fst-page-hero--quote,
  .fst-page-hero--careers,
  .fst-page-hero--technologies,
  .fst-page-hero--legal {
    padding-block: var(--fst-space-14) 4rem;
  }
}

/* Privacy / legal document layout */
.fst-page-hero--privacy,
.fst-page-hero--terms {
  min-height: clamp(18rem, 38vw, 24rem);
}

.fst-legal-hero__copy {
  max-width: 40rem;
}

.fst-page-hero--privacy .fst-page-hero__title,
.fst-page-hero--terms .fst-page-hero__title {
  max-width: 14ch;
}

.fst-legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--fst-space-5) 0 var(--fst-space-6);
}

.fst-legal-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: var(--fst-radius-full);
  border: 1px solid rgba(147, 197, 253, 0.35);
  background: rgba(37, 99, 235, 0.18);
  color: #dbeafe;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.01em;
}

.fst-legal-hero__badge--soft {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.88);
  font-weight: var(--fst-weight-medium);
}

.fst-legal-hero__actions {
  margin-top: 0;
}

.fst-legal {
  padding-block: var(--fst-space-10) var(--fst-space-16);
}

.fst-legal__layout {
  display: grid;
  gap: var(--fst-space-8);
  align-items: start;
}

.fst-legal__toc {
  padding: var(--fst-space-5);
  border-radius: var(--fst-radius-lg);
  border: 1px solid var(--fst-border);
  background: #fff;
  box-shadow: var(--fst-shadow-xs);
}

.fst-legal__toc-label {
  margin: 0 0 var(--fst-space-3);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fst-text-muted);
}

.fst-legal__toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fst-legal__toc-nav a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: var(--fst-radius-sm);
  color: var(--fst-text-slate);
  font-size: var(--fst-text-sm);
  line-height: 1.35;
  text-decoration: none;
  transition:
    background var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease);
}

.fst-legal__toc-nav a:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--fst-blue-700);
}

.fst-legal__doc {
  padding: var(--fst-space-6) var(--fst-space-5);
  border-radius: var(--fst-radius-xl);
  border: 1px solid var(--fst-border);
  background: #fff;
  box-shadow: var(--fst-shadow-sm);
  max-width: none;
}

.fst-legal__intro {
  margin: 0;
  padding-bottom: var(--fst-space-6);
  border-bottom: 1px solid var(--fst-border);
  font-size: var(--fst-text-lg);
  color: var(--fst-text-slate);
}

.fst-legal__block {
  scroll-margin-top: calc(var(--fst-header-height-scrolled) + 1.25rem);
}

.fst-legal__block + .fst-legal__block {
  margin-top: var(--fst-space-8);
  padding-top: var(--fst-space-8);
  border-top: 1px solid var(--fst-border);
}

.fst-legal__doc h2 {
  margin-top: 0;
  margin-bottom: var(--fst-space-3);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--fst-navy-900);
}

.fst-legal__doc ul {
  margin-top: var(--fst-space-4);
  padding: var(--fst-space-4) var(--fst-space-4) var(--fst-space-4) var(--fst-space-8);
  border-radius: var(--fst-radius-md);
  background: var(--fst-bg-slate-50);
  border: 1px solid var(--fst-border);
}

.fst-legal__doc li {
  color: var(--fst-text-slate);
}

.fst-legal__contact-card {
  display: grid;
  gap: var(--fst-space-3);
  margin-top: var(--fst-space-5);
  padding: var(--fst-space-5);
  border-radius: var(--fst-radius-lg);
  border: 1px solid rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.06), rgba(6, 182, 212, 0.04)),
    #fff;
}

.fst-legal__contact-card > div {
  display: grid;
  gap: 0.15rem;
}

.fst-legal__contact-card span {
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fst-text-muted);
}

.fst-legal__contact-card a,
.fst-legal__contact-card strong {
  color: var(--fst-navy-900);
  font-weight: var(--fst-weight-semibold);
  text-decoration: none;
  font-size: var(--fst-text-base);
}

.fst-legal__contact-card a:hover {
  color: var(--fst-blue-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 640px) {
  .fst-legal__doc {
    padding: var(--fst-space-8) var(--fst-space-8);
  }

  .fst-legal__contact-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fst-space-5);
  }
}

@media (min-width: 1024px) {
  .fst-legal__layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--fst-space-10);
  }

  .fst-legal__toc {
    position: sticky;
    top: calc(var(--fst-header-height-scrolled) + 1rem);
  }
}

@media (max-width: 1023px) {
  .fst-legal__toc-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .fst-legal__toc-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid var(--fst-border);
    background: var(--fst-bg-slate-50);
  }
}

.fst-faq-nav {
  position: sticky;
  top: var(--fst-header-height-scrolled);
  z-index: 40;
  padding-block: 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--fst-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fst-faq-nav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.fst-faq-nav__chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-white);
  color: var(--fst-navy-800);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  text-decoration: none;
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration-fast) var(--fst-ease);
}

.fst-faq-nav__chip:hover {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.06);
  transform: translateY(-1px);
}

.fst-section--faq {
  padding-top: var(--fst-space-8);
}

.fst-faq-layout {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-8);
  max-width: 860px;
  margin-inline: auto;
}

.fst-faq-group {
  scroll-margin-top: calc(var(--fst-header-height-scrolled) + 4rem);
}

.fst-faq-group__head {
  display: flex;
  align-items: center;
  gap: var(--fst-space-4);
  margin-bottom: var(--fst-space-5);
}

.fst-faq-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.1));
  color: var(--fst-blue-700);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-bold);
}

.fst-faq-group__head .fst-eyebrow {
  margin-bottom: 0.2rem;
}

.fst-faq-group__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--fst-navy-950);
}

.fst-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fst-accordion__item {
  background: var(--fst-bg-white);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  overflow: hidden;
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration) var(--fst-ease);
}

.fst-accordion__item[open],
.fst-accordion__item:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}

.fst-accordion__item[open] {
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.98)),
    #fff;
}

.fst-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fst-space-4);
  padding: 1.05rem 1.15rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.fst-accordion__summary::-webkit-details-marker,
.fst-accordion__summary::marker {
  display: none;
  content: "";
}

.fst-accordion__index {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.fst-accordion__item[open] .fst-accordion__index {
  color: #eff6ff;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
  border-color: transparent;
}

.fst-accordion__q {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 650;
  color: var(--fst-navy-950);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.fst-accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--fst-blue-600);
  border: 1px solid rgba(37, 99, 235, 0.12);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease);
}

.fst-accordion__icon svg {
  width: 16px;
  height: 16px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-accordion__item[open] .fst-accordion__icon {
  transform: rotate(45deg);
  background: var(--fst-blue-600);
  border-color: transparent;
  color: #fff;
}

.fst-accordion__panel {
  padding: 0 1.15rem 1.2rem 3.55rem;
  color: var(--fst-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.fst-accordion__panel > *:first-child {
  margin-top: 0;
}

.fst-accordion__panel > *:last-child {
  margin-bottom: 0;
}

.fst-accordion__panel p {
  margin: 0 0 0.75rem;
}

@media (max-width: 640px) {
  .fst-accordion__panel {
    padding-left: 1.15rem;
  }
}

.fst-service-faq {
  display: grid;
  gap: var(--fst-space-8);
  align-items: start;
}

.fst-service-faq__aside {
  padding: 1.35rem 1.4rem;
  border-radius: 1.2rem;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(37, 99, 235, 0.18), transparent 55%),
    linear-gradient(165deg, #0b1220 0%, #15233b 100%);
  color: #e2e8f0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.fst-service-faq__aside .fst-eyebrow {
  color: #93c5fd;
}

.fst-service-faq__aside .fst-section-title {
  margin: 0.35rem 0 0.75rem;
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  text-align: left;
}

.fst-service-faq__text {
  margin: 0 0 1rem;
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.95rem;
  line-height: 1.6;
}

.fst-service-faq__points {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.fst-service-faq__points li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  font-weight: 550;
  color: #dbeafe;
}

.fst-service-faq__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}

.fst-service-faq__aside .fst-btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 900px) {
  .fst-service-faq {
    grid-template-columns: 0.9fr 1.35fr;
    gap: var(--fst-space-10);
  }

  .fst-service-faq__aside {
    position: sticky;
    top: 6.5rem;
  }
}

.fst-faq-empty {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--fst-space-10);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: 1rem;
}

.fst-faq-empty p {
  margin: 0 0 var(--fst-space-5);
  color: var(--fst-text-muted);
}

/* Legacy .fst-faq hooks (kept for other templates) */
.fst-faq {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
}

.fst-faq__item {
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-md);
  overflow: hidden;
  transition: border-color var(--fst-duration) var(--fst-ease), box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-faq__item.is-open {
  border-color: var(--fst-border-strong);
  box-shadow: var(--fst-shadow-sm);
}

.fst-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fst-space-4);
  width: 100%;
  padding: var(--fst-space-5) var(--fst-space-6);
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-text-charcoal);
  text-align: left;
  cursor: pointer;
  transition: background var(--fst-duration-fast) var(--fst-ease);
}

.fst-faq__question:hover {
  background: var(--fst-bg-slate-50);
}

.fst-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fst-bg-slate-100);
  color: var(--fst-text-slate);
  transition:
    transform var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease);
}

.fst-faq__icon svg {
  width: 14px;
  height: 14px;
}

.fst-faq__item.is-open .fst-faq__icon {
  transform: rotate(45deg);
  background: var(--fst-blue-600);
  color: #fff;
}

.fst-faq__answer {
  display: none;
  padding: 0 var(--fst-space-6) var(--fst-space-5);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  line-height: var(--fst-leading-relaxed);
}

.fst-faq__item.is-open .fst-faq__answer {
  display: block;
}

.fst-faq__answer p {
  margin-bottom: var(--fst-space-3);
}

.fst-faq__answer p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21. Forms ? Contact + Multi-Step Quote Wizard
   -------------------------------------------------------------------------- */
.fst-form {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-5);
}

.fst-form__row {
  display: grid;
  gap: var(--fst-space-5);
}

.fst-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-2);
}

.fst-form__label {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-charcoal);
}

.fst-form__label .fst-required {
  color: #dc2626;
  margin-left: 2px;
}

.fst-form__hint {
  font-size: var(--fst-text-xs);
  color: var(--fst-text-muted);
}

.fst-form__input,
.fst-form__textarea,
.fst-form__select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fst-text-sm);
  color: var(--fst-text-charcoal);
  background: var(--fst-bg-white);
  border: 1.5px solid var(--fst-border);
  border-radius: var(--fst-radius-sm);
  transition:
    border-color var(--fst-duration-fast) var(--fst-ease),
    box-shadow var(--fst-duration-fast) var(--fst-ease);
  appearance: none;
}

.fst-form__input::placeholder,
.fst-form__textarea::placeholder {
  color: #94a3b8;
}

.fst-form__input:hover,
.fst-form__textarea:hover,
.fst-form__select:hover {
  border-color: var(--fst-border-strong);
}

.fst-form__input:focus,
.fst-form__textarea:focus,
.fst-form__select:focus {
  border-color: var(--fst-blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

.fst-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.fst-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.fst-form__error {
  font-size: var(--fst-text-xs);
  color: #dc2626;
}

.fst-form__input.is-error,
.fst-form__textarea.is-error,
.fst-form__select.is-error {
  border-color: #dc2626;
}

.fst-form__input.is-error:focus,
.fst-form__textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.fst-form__checkbox,
.fst-form__radio {
  display: flex;
  align-items: flex-start;
  gap: var(--fst-space-3);
  cursor: pointer;
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
}

.fst-form__checkbox input,
.fst-form__radio input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--fst-blue-600);
  flex-shrink: 0;
}

.fst-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  margin-top: var(--fst-space-2);
}

.fst-form-card {
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-xl);
  padding: var(--fst-space-8);
  box-shadow: var(--fst-shadow-md);
}

@media (min-width: 640px) {
  .fst-form__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Quote Wizard */
.fst-section--quote {
  padding-top: var(--fst-space-8);
}

.fst-wizard {
  max-width: 920px;
  margin-inline: auto;
}

.fst-wizard.fst-form-card {
  padding: var(--fst-space-6);
  border-radius: 1.15rem;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.06);
}

@media (min-width: 768px) {
  .fst-wizard.fst-form-card {
    padding: var(--fst-space-8) var(--fst-space-10);
  }
}

.fst-wizard__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fst-space-8);
  position: relative;
}

.fst-wizard__progress::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--fst-border);
  z-index: 0;
}

.fst-wizard__step-indicator {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fst-space-2);
  flex: 1;
}

.fst-wizard__step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-bold);
  background: var(--fst-bg-white);
  border: 2px solid var(--fst-border);
  color: var(--fst-text-muted);
  transition:
    background var(--fst-duration) var(--fst-ease),
    border-color var(--fst-duration) var(--fst-ease),
    color var(--fst-duration) var(--fst-ease);
}

.fst-wizard__step-indicator.is-active .fst-wizard__step-dot,
.fst-wizard__step-indicator.is-complete .fst-wizard__step-dot {
  background: var(--fst-blue-600);
  border-color: var(--fst-blue-600);
  color: #fff;
}

.fst-wizard__step-label {
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-muted);
  text-align: center;
  display: none;
}

.fst-wizard__step-indicator.is-active .fst-wizard__step-label {
  color: var(--fst-blue-600);
}

.fst-wizard__panel {
  display: none;
}

.fst-wizard__panel.is-active,
.fst-wizard__panel:not([hidden]) {
  display: block;
  animation: fst-fade-in var(--fst-duration) var(--fst-ease);
}

.fst-wizard__panel[hidden] {
  display: none !important;
}

.fst-wizard__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0 0 var(--fst-space-2);
  color: var(--fst-navy-950);
  letter-spacing: -0.02em;
}

.fst-wizard__desc {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin: 0 0 var(--fst-space-6);
}

.fst-wizard__options {
  display: grid;
  gap: var(--fst-space-3);
}

.fst-wizard__options--cards {
  grid-template-columns: 1fr;
}

.fst-wizard__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--fst-space-4) var(--fst-space-5);
  border: 1px solid var(--fst-border);
  border-radius: 0.85rem;
  background: var(--fst-bg-white);
  cursor: pointer;
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    background var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease),
    transform var(--fst-duration-fast) var(--fst-ease);
}

.fst-wizard__option:hover {
  border-color: rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.fst-wizard__option.is-selected,
.fst-wizard__option:has(input:checked) {
  border-color: var(--fst-blue-600);
  background: rgba(37, 99, 235, 0.05);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fst-wizard__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fst-wizard__option--card {
  position: relative;
  align-items: flex-start;
  min-height: 100%;
  padding: var(--fst-space-5);
}

.fst-wizard__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.75rem;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.08));
  color: var(--fst-blue-600);
}

.fst-wizard__option-icon .fst-icon {
  display: inline-flex;
  line-height: 0;
}

.fst-wizard__option-icon svg,
.fst-wizard__option-icon .fst-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
  stroke: currentColor;
  fill: none;
}

.fst-wizard__option-title {
  display: block;
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-navy-950);
}

.fst-wizard__option-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--fst-text-muted);
  line-height: 1.45;
}

.fst-wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fst-space-3);
  margin-top: var(--fst-space-8);
  padding-top: var(--fst-space-6);
  border-top: 1px solid var(--fst-border);
}

@media (min-width: 640px) {
  .fst-wizard__step-label {
    display: block;
  }

  .fst-wizard__options--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fst-wizard__options--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .fst-wizard__options--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   22. Blog Cards, Single Post, Sidebar
   -------------------------------------------------------------------------- */
.fst-blog-grid {
  display: grid;
  gap: var(--fst-space-6);
  grid-template-columns: 1fr;
}

.fst-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  overflow: hidden;
  transition:
    transform var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fst-shadow-md);
}

.fst-blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fst-navy-950);
}

.fst-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 0.8s var(--fst-ease), filter 0.8s var(--fst-ease);
}

.fst-blog-card:hover .fst-blog-card__media img {
  transform: scale(1.08);
  filter: saturate(1.14) contrast(1.06);
}

.fst-blog-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.18), transparent 50%);
  pointer-events: none;
}

.fst-blog-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1rem 1.15rem 1.1rem;
}

.fst-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-xs);
  color: var(--fst-text-muted);
  margin-bottom: 0.45rem;
}

.fst-blog-card__category {
  color: var(--fst-blue-600);
  font-weight: var(--fst-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--fst-tracking-wide);
}

.fst-blog-card__title {
  font-size: var(--fst-text-lg);
  margin-bottom: var(--fst-space-3);
}

.fst-blog-card__title a {
  color: var(--fst-text-charcoal);
}

.fst-blog-card__title a:hover {
  color: var(--fst-blue-600);
}

.fst-blog-card .fst-card__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fst-blog-card .fst-card__text,
.fst-blog-card__excerpt {
  font-size: var(--fst-text-sm);
  line-height: 1.45;
  color: var(--fst-text-muted);
  margin-bottom: 0.7rem;
  flex-grow: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fst-blog-card .fst-link {
  margin-top: auto;
}

.fst-blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--fst-space-4);
  border-top: 1px solid var(--fst-border);
}

.fst-blog-card__author {
  display: flex;
  align-items: center;
  gap: var(--fst-space-2);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
}

.fst-blog-card__author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.fst-blog-card__read {
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-blue-600);
}

/* Blog layout */
.fst-blog-layout {
  display: grid;
  gap: var(--fst-space-10);
}

.fst-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-6);
}

.fst-widget {
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
}

.fst-widget__title {
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-semibold);
  margin-bottom: var(--fst-space-4);
  padding-bottom: var(--fst-space-3);
  border-bottom: 1px solid var(--fst-border);
}

.fst-widget__list {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-3);
}

.fst-widget__list a {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
}

.fst-widget__list a:hover {
  color: var(--fst-blue-600);
}

.fst-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-2);
}

.fst-tag {
  display: inline-block;
  padding: var(--fst-space-1) var(--fst-space-3);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
  background: var(--fst-bg-slate-50);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-full);
  transition: border-color var(--fst-duration-fast) var(--fst-ease), color var(--fst-duration-fast) var(--fst-ease);
}

.fst-tag:hover {
  border-color: var(--fst-blue-500);
  color: var(--fst-blue-600);
}

.fst-widget__search {
  display: flex;
  gap: var(--fst-space-2);
}

.fst-widget__search .fst-form__input {
  flex: 1;
}

/* Single post */
.fst-single {
  max-width: var(--fst-container-narrow);
  margin-inline: auto;
}

.fst-single__header {
  margin-bottom: var(--fst-space-8);
  text-align: center;
}

.fst-single__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fst-space-4);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin-top: var(--fst-space-4);
}

.fst-single__featured {
  margin-bottom: var(--fst-space-10);
  border-radius: var(--fst-radius-xl);
  overflow: hidden;
  border: 1px solid var(--fst-border);
}

.fst-single__featured img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.fst-single__content {
  margin-bottom: var(--fst-space-12);
}

.fst-single__footer {
  padding-top: var(--fst-space-8);
  border-top: 1px solid var(--fst-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-4);
  justify-content: space-between;
  align-items: center;
}

.fst-single__share {
  display: flex;
  align-items: center;
  gap: var(--fst-space-2);
}

.fst-single__share-label {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-muted);
  margin-right: var(--fst-space-2);
}

@media (min-width: 640px) {
  .fst-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fst-blog-layout {
    grid-template-columns: 1fr 320px;
  }

  .fst-blog-layout--reverse {
    grid-template-columns: 320px 1fr;
  }
}

/* --------------------------------------------------------------------------
   23. Team Cards & Job Listings
   -------------------------------------------------------------------------- */
.fst-team-grid {
  display: grid;
  gap: var(--fst-space-6);
  grid-template-columns: 1fr;
}

.fst-team-card {
  text-align: center;
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  transition: box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-team-card:hover {
  box-shadow: var(--fst-shadow-md);
}

.fst-team-card__photo {
  width: 120px;
  height: 120px;
  margin-inline: auto;
  margin-bottom: var(--fst-space-5);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--fst-bg-slate-100);
  background: var(--fst-bg-slate-100);
}

.fst-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fst-team-card__name {
  font-size: var(--fst-text-lg);
  margin-bottom: var(--fst-space-1);
}

.fst-team-card__role {
  font-size: var(--fst-text-sm);
  color: var(--fst-blue-600);
  font-weight: var(--fst-weight-medium);
  margin-bottom: var(--fst-space-3);
}

.fst-team-card__bio {
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-4);
}

.fst-team-card__social {
  display: flex;
  justify-content: center;
  gap: var(--fst-space-2);
}

.fst-team-card__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fst-radius-sm);
  background: var(--fst-bg-slate-50);
  color: var(--fst-text-muted);
  border: 1px solid var(--fst-border);
}

.fst-team-card__social a:hover {
  color: var(--fst-blue-600);
  border-color: var(--fst-blue-500);
}

.fst-team-card__social svg {
  width: 16px;
  height: 16px;
}

/* Jobs */
.fst-jobs {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-4);
}

.fst-job-card {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-4);
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  transition:
    border-color var(--fst-duration) var(--fst-ease),
    box-shadow var(--fst-duration) var(--fst-ease);
}

.fst-job-card:hover {
  border-color: var(--fst-border-strong);
  box-shadow: var(--fst-shadow-sm);
}

.fst-job-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-2);
}

.fst-job-card__title {
  font-size: var(--fst-text-lg);
}

.fst-job-card__title a {
  color: var(--fst-text-charcoal);
}

.fst-job-card__title a:hover {
  color: var(--fst-blue-600);
}

.fst-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
}

.fst-job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-1);
}

.fst-job-card__meta-item svg {
  width: 14px;
  height: 14px;
}

.fst-job-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--fst-space-1) var(--fst-space-3);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-blue-700);
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--fst-radius-full);
}

.fst-job-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fst-space-4);
  padding-top: var(--fst-space-4);
  border-top: 1px solid var(--fst-border);
}

@media (min-width: 640px) {
  .fst-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fst-job-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .fst-job-card__footer {
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .fst-team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   24. Tech Stack Category Grids
   -------------------------------------------------------------------------- */

/* Logo / tech pill rows (used on About, Technologies, Industries, Trust) */
.fst-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--fst-space-3);
}

.fst-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-slate-50);
  color: var(--fst-text-slate);
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

.fst-card .fst-logo-row {
  margin-top: var(--fst-space-4);
}

.fst-card .fst-logo-pill {
  background: #fff;
  border-color: var(--fst-border);
  color: var(--fst-navy-800);
}

.fst-section--muted .fst-card .fst-logo-pill {
  background: var(--fst-bg-white);
}

.fst-logo-pill:hover {
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--fst-blue-700);
}
.fst-tech-stack {
  display: grid;
  gap: var(--fst-space-8);
}

.fst-tech-category {
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
  padding: var(--fst-space-6);
}

.fst-tech-category__title {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-5);
  padding-bottom: var(--fst-space-3);
  border-bottom: 1px solid var(--fst-border);
}

.fst-tech-category__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fst-space-3);
}

.fst-tech-item {
  display: flex;
  align-items: center;
  gap: var(--fst-space-3);
  padding: var(--fst-space-3);
  border-radius: var(--fst-radius-sm);
  transition: background var(--fst-duration-fast) var(--fst-ease);
}

.fst-tech-item:hover {
  background: var(--fst-bg-slate-50);
}

.fst-tech-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fst-radius-sm);
  background: var(--fst-bg-slate-100);
  flex-shrink: 0;
  overflow: hidden;
}

.fst-tech-item__icon img,
.fst-tech-item__icon svg {
  width: 20px;
  height: 20px;
}

.fst-tech-item__name {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-charcoal);
}

@media (min-width: 640px) {
  .fst-tech-category__items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-tech-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .fst-tech-category__items {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   25. Case Study Single Layout
   -------------------------------------------------------------------------- */
.fst-case-study {
  max-width: var(--fst-container);
  margin-inline: auto;
}

.fst-case-study__hero {
  margin-bottom: var(--fst-space-12);
}

.fst-case-study__hero-media {
  border-radius: var(--fst-radius-xl);
  overflow: hidden;
  border: 1px solid var(--fst-border);
  margin-bottom: var(--fst-space-8);
  background: var(--fst-navy-900);
}

.fst-case-study__hero-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.fst-case-study__meta-bar {
  display: grid;
  gap: var(--fst-space-6);
  padding: var(--fst-space-6);
  background: var(--fst-bg-slate-50);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
}

.fst-case-study__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-1);
}

.fst-case-study__meta-label {
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-text-muted);
}

.fst-case-study__meta-value {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: var(--fst-text-charcoal);
}

.fst-case-study__layout {
  display: grid;
  gap: var(--fst-space-10);
}

.fst-case-study__content h2 {
  margin-top: var(--fst-space-10);
  margin-bottom: var(--fst-space-4);
}

.fst-case-study__content h2:first-child {
  margin-top: 0;
}

.fst-case-study__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-6);
}

.fst-case-study__results {
  display: grid;
  gap: var(--fst-space-4);
  padding: var(--fst-space-6);
  background: var(--fst-navy-900);
  border-radius: var(--fst-radius-lg);
  color: var(--fst-text-inverse-muted);
}

.fst-case-study__results-title {
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-semibold);
  color: #fff;
  margin-bottom: var(--fst-space-2);
}

.fst-case-study__result {
  padding: var(--fst-space-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--fst-radius-md);
}

.fst-case-study__result-value {
  font-size: var(--fst-text-2xl);
  font-weight: var(--fst-weight-extrabold);
  color: var(--fst-cyan-400);
  line-height: 1;
  margin-bottom: var(--fst-space-1);
}

.fst-case-study__result-label {
  font-size: var(--fst-text-xs);
  color: var(--fst-text-inverse-muted);
}

.fst-case-study__tech {
  padding: var(--fst-space-6);
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-lg);
}

.fst-case-study__gallery {
  display: grid;
  gap: var(--fst-space-4);
  margin-block: var(--fst-space-10);
}

.fst-case-study__gallery img {
  border-radius: var(--fst-radius-lg);
  border: 1px solid var(--fst-border);
  width: 100%;
}

@media (min-width: 640px) {
  .fst-case-study__meta-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .fst-case-study__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fst-case-study__meta-bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .fst-case-study__layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }

  .fst-case-study__sidebar {
    position: sticky;
    top: calc(var(--fst-header-height) + var(--fst-space-6));
  }
}

/* --------------------------------------------------------------------------
   26. Animations ? Reveal + Reduced Motion
   -------------------------------------------------------------------------- */
@keyframes fst-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fst-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fst-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fst-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fst-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fst-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--fst-ease-out),
    transform 0.6s var(--fst-ease-out);
}

.fst-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fst-reveal--fade {
  transform: none;
}

.fst-reveal--left {
  transform: translateX(-24px);
}

.fst-reveal--left.is-visible {
  transform: translateX(0);
}

.fst-reveal--right {
  transform: translateX(24px);
}

.fst-reveal--right.is-visible {
  transform: translateX(0);
}

.fst-reveal--scale {
  transform: scale(0.96);
}

.fst-reveal--scale.is-visible {
  transform: scale(1);
}

.fst-reveal--delay-1 { transition-delay: 100ms; }
.fst-reveal--delay-2 { transition-delay: 200ms; }
.fst-reveal--delay-3 { transition-delay: 300ms; }
.fst-reveal--delay-4 { transition-delay: 400ms; }
.fst-reveal--delay-5 { transition-delay: 500ms; }

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

  .fst-reveal,
  .fst-reveal--fade,
  .fst-reveal--left,
  .fst-reveal--right,
  .fst-reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .fst-service-card:hover,
  .fst-portfolio-card:hover,
  .fst-blog-card:hover {
    transform: none;
  }

  .fst-hero__orb {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   27. Utility Helpers
   -------------------------------------------------------------------------- */
.fst-mt-0 { margin-top: 0; }
.fst-mt-4 { margin-top: var(--fst-space-4); }
.fst-mt-6 { margin-top: var(--fst-space-6); }
.fst-mt-8 { margin-top: var(--fst-space-8); }
.fst-mt-12 { margin-top: var(--fst-space-12); }
.fst-mb-0 { margin-bottom: 0; }
.fst-mb-4 { margin-bottom: var(--fst-space-4); }
.fst-mb-6 { margin-bottom: var(--fst-space-6); }
.fst-mb-8 { margin-bottom: var(--fst-space-8); }
.fst-mb-12 { margin-bottom: var(--fst-space-12); }

.fst-hidden { display: none !important; }
.fst-block { display: block; }
.fst-inline-flex { display: inline-flex; }

.fst-w-full { width: 100%; }
.fst-max-w-prose { max-width: 65ch; }

.fst-rounded { border-radius: var(--fst-radius-md); }
.fst-rounded-lg { border-radius: var(--fst-radius-lg); }
.fst-rounded-xl { border-radius: var(--fst-radius-xl); }

.fst-shadow-sm { box-shadow: var(--fst-shadow-sm); }
.fst-shadow-md { box-shadow: var(--fst-shadow-md); }
.fst-shadow-lg { box-shadow: var(--fst-shadow-lg); }

.fst-bg-white { background-color: var(--fst-bg-white); }
.fst-bg-alt { background-color: var(--fst-bg-slate-50); }
.fst-bg-dark { background-color: var(--fst-navy-900); color: var(--fst-text-inverse-muted); }

.fst-divider {
  border: none;
  border-top: 1px solid var(--fst-border);
  margin-block: var(--fst-space-8);
}

.fst-divider--dark {
  border-top-color: var(--fst-border-dark);
}

.fst-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fst-space-1);
  padding: 0.25rem 0.625rem;
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  border-radius: var(--fst-radius-full);
  background: rgba(37, 99, 235, 0.08);
  color: var(--fst-blue-700);
}

.fst-badge--success {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.fst-badge--warning {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.fst-badge--cyan {
  background: rgba(6, 182, 212, 0.1);
  color: #0e7490;
}

/* Pagination */
.fst-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fst-space-2);
  margin-top: var(--fst-space-12);
}

.fst-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--fst-space-2);
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-sm);
  background: var(--fst-bg-white);
  transition:
    background var(--fst-duration-fast) var(--fst-ease),
    border-color var(--fst-duration-fast) var(--fst-ease),
    color var(--fst-duration-fast) var(--fst-ease);
}

.fst-pagination__link:hover {
  border-color: var(--fst-border-strong);
  color: var(--fst-text-charcoal);
}

.fst-pagination__link.is-active {
  background: var(--fst-blue-600);
  border-color: var(--fst-blue-600);
  color: #fff;
}

.fst-pagination__link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Contact page split layout */
.fst-contact-layout {
  display: grid;
  gap: var(--fst-space-10);
}

.fst-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--fst-space-6);
}

.fst-contact-info__item {
  display: flex;
  gap: var(--fst-space-4);
}

.fst-contact-info__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fst-radius-md);
  background: rgba(37, 99, 235, 0.08);
  color: var(--fst-blue-600);
}

.fst-contact-info__icon svg {
  width: 20px;
  height: 20px;
}

.fst-contact-info__label {
  font-size: var(--fst-text-xs);
  font-weight: var(--fst-weight-semibold);
  letter-spacing: var(--fst-tracking-wide);
  text-transform: uppercase;
  color: var(--fst-text-muted);
  margin-bottom: var(--fst-space-1);
}

.fst-contact-info__value {
  font-size: var(--fst-text-base);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-charcoal);
}

.fst-contact-info__value a {
  color: var(--fst-text-charcoal);
}

.fst-contact-info__value a:hover {
  color: var(--fst-blue-600);
}

@media (min-width: 1024px) {
  .fst-contact-layout {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}

.fst-map-embed {
  margin-top: var(--fst-space-4);
  overflow: hidden;
  border-radius: var(--fst-radius-md);
  border: 1px solid var(--fst-border);
  background: var(--fst-bg-slate-50);
}

.fst-map-embed iframe {
  display: block;
  width: 100%;
  min-height: 220px;
  border: 0;
}

.fst-map-embed__caption {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: var(--fst-text-sm);
  color: var(--fst-text-muted);
  border-top: 1px solid var(--fst-border);
}

.fst-about-hero__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.15rem;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

.fst-about-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fst-about-hero__frame-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 13, 24, 0.45), transparent 50%);
  pointer-events: none;
}

.fst-about-hero__badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #eff6ff;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fst-case-hero-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 16 / 9;
  background: var(--fst-navy-950);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.fst-case-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fst-case-hero-media__frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  pointer-events: none;
}

.fst-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-top: var(--fst-space-5);
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.9rem;
}

.fst-case-meta strong {
  color: #fff;
  font-weight: 650;
}

.fst-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* WordPress alignment helpers */
.alignwide {
  max-width: var(--fst-container-wide);
  margin-inline: auto;
}

.alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.wp-block-image img {
  border-radius: var(--fst-radius-md);
}

/* Screen-reader / print */
@media print {
  .fst-header,
  .fst-footer,
  .fst-drawer,
  .fst-cta-band,
  .fst-header__toggle {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
  }
}

/* ==========================================================================
   Compatibility layer ? markup aliases used by theme PHP templates
   ========================================================================== */

.fst-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--fst-navy-900);
  line-height: 0;
}

.fst-logo__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 30%, var(--fst-cyan-400), transparent 55%),
    linear-gradient(145deg, var(--fst-blue-600), var(--fst-navy-800));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.fst-logo__text {
  font-size: var(--fst-text-lg);
  font-weight: var(--fst-weight-extrabold);
  letter-spacing: var(--fst-tracking-tight);
  color: var(--fst-navy-900);
  line-height: 1.1;
}

.fst-logo__text span {
  color: var(--fst-blue-600);
}

.fst-logo--footer .fst-logo__text,
.fst-footer .fst-logo__text {
  color: #fff;
}

.fst-logo--footer .fst-logo__text span,
.fst-footer .fst-logo__text span {
  color: var(--fst-cyan-400);
}

.fst-footer .fst-logo__img--footer {
  height: 54px;
  max-width: 240px;
}

.fst-eyebrow--light {
  color: var(--fst-cyan-400);
}

.fst-hero h1,
.fst-hero .fst-hero__title {
  color: #fff;
}

.fst-hero .fst-section-text,
.fst-hero .fst-page-hero__lead {
  color: var(--fst-text-inverse-muted);
}

/* WordPress menu links inside header nav */
.fst-nav__list > li > a,
.fst-nav .menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fst-text-sm);
  font-weight: var(--fst-weight-medium);
  color: var(--fst-text-slate);
  border-radius: var(--fst-radius-sm);
}

.fst-nav__list > li > a:hover,
.fst-nav .menu-item > a:hover {
  color: var(--fst-navy-900);
  background: var(--fst-bg-slate-50);
}

.fst-nav .sub-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 240px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--fst-bg-white);
  border: 1px solid var(--fst-border);
  border-radius: var(--fst-radius-md);
  box-shadow: var(--fst-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--fst-duration) var(--fst-ease), visibility var(--fst-duration) var(--fst-ease), transform var(--fst-duration) var(--fst-ease);
  z-index: 100;
}

.fst-nav .menu-item-has-children {
  position: relative;
}

.fst-nav__submenu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--fst-radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.fst-nav__submenu-toggle-icon {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fst-duration) var(--fst-ease);
}

.menu-item-has-children.is-open > .fst-nav__submenu-toggle .fst-nav__submenu-toggle-icon {
  transform: rotate(225deg);
}

.fst-nav .menu-item-has-children:hover > .sub-menu,
.fst-nav .menu-item-has-children:focus-within > .sub-menu,
.fst-nav .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fst-nav .sub-menu a {
  display: block;
  padding: 0.75rem;
  border-radius: var(--fst-radius-sm);
  font-size: var(--fst-text-sm);
  color: var(--fst-text-slate);
}

.fst-nav .sub-menu a:hover {
  background: var(--fst-bg-slate-50);
  color: var(--fst-navy-900);
}

/* Mobile nav as overlay panel (no separate drawer markup) */
@media (max-width: 1023px) {
  .fst-header__nav {
    display: block;
    position: fixed;
    top: var(--fst-header-height);
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: calc(100dvh - var(--fst-header-height));
    max-height: calc(100dvh - var(--fst-header-height));
    background: var(--fst-bg-white);
    padding: 1.25rem 1.5rem 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--fst-duration) var(--fst-ease);
    z-index: 998;
    box-shadow: var(--fst-shadow-lg);
  }

  body.fst-nav-open .fst-header__nav,
  .fst-header.is-open .fst-header__nav {
    transform: translateX(0);
  }

  .fst-header.is-scrolled .fst-header__nav,
  body.fst-nav-open .fst-header.is-scrolled .fst-header__nav {
    top: var(--fst-header-height-scrolled);
    height: calc(100dvh - var(--fst-header-height-scrolled));
    max-height: calc(100dvh - var(--fst-header-height-scrolled));
  }

  .fst-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    height: auto;
    width: 100%;
  }

  .fst-nav__list > li,
  .fst-nav .menu-item,
  .fst-nav__item {
    display: block;
    height: auto;
    width: 100%;
  }

  .fst-nav__list > li > a,
  .fst-nav .menu-item > a {
    display: flex;
    width: 100%;
    padding: 0.9rem 0.75rem;
    font-size: var(--fst-text-base);
  }

  .fst-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .fst-nav .menu-item-has-children > a {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .fst-nav__submenu-toggle {
    display: inline-flex;
  }

  .fst-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    display: none;
    padding-left: 0.75rem;
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }

  .fst-nav .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  .fst-nav__cta-mobile {
    display: inline-flex;
    margin-top: 1.5rem;
    width: 100%;
    justify-content: center;
  }

  .fst-header__actions {
    display: none !important;
  }

  .fst-header__toggle {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .fst-header__nav,
  .fst-header__actions {
    display: flex;
  }

  .fst-header__toggle,
  .fst-nav__cta-mobile {
    display: none;
  }
}

/* Dashboard / mockup extras used in cards */
.fst-mockup--card,
.fst-mockup--feature,
.fst-mockup--wide {
  min-height: 180px;
}

.fst-mockup--card .fst-mockup__body,
.fst-mockup--wide .fst-mockup__body {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  grid-template-columns: 1fr;
}

.fst-mockup--card .fst-mockup__body > span,
.fst-mockup--wide .fst-mockup__body > span {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.fst-mockup--card .fst-mockup__body > span:nth-child(1) {
  width: 70%;
}

.fst-mockup--card .fst-mockup__body > span:nth-child(2) {
  width: 90%;
  height: 64px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.08));
}

.fst-portfolio-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--fst-radius-lg) var(--fst-radius-lg) 0 0;
  background: var(--fst-navy-800);
}

.fst-portfolio-card__media img {
  width: 100%;
  height: auto;
  display: block;
}


.fst-blog-card__media .fst-blog-card__placeholder,
.fst-blog-featured__media .fst-blog-card__placeholder {
  height: 100%;
  min-height: 100%;
  border-radius: 0;
}

.fst-blog-card__media .fst-mockup--card,
.fst-blog-featured__media .fst-mockup--card {
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.fst-blog-card__media .fst-mockup__body,
.fst-blog-featured__media .fst-mockup__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 0;
  height: calc(100% - 46px);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(37, 99, 235, 0.3), transparent 55%),
    var(--fst-navy-900);
}

.fst-blog-featured__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--fst-radius-lg);
  background: var(--fst-navy-950);
  aspect-ratio: 16 / 9;
}

.fst-blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.04);
  transition: transform 0.85s var(--fst-ease), filter 0.85s var(--fst-ease);
}

.fst-blog-featured:hover .fst-blog-featured__media img {
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.06);
}

.fst-blog-featured__media .fst-blog-card__shade {
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.45) 0%, transparent 50%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.2), transparent 55%);
}

.fst-section__action {
  margin-top: var(--fst-space-10);
  text-align: center;
}

.fst-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fst-space-3);
}

.fst-page-hero--service .fst-service-card__icon--lg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}

.fst-service-card__icon--lg svg {
  width: 32px;
  height: 32px;
}

/* --------------------------------------------------------------------------
   Single service page (modern)
   -------------------------------------------------------------------------- */

.fst-page-hero--service {
  padding-block: var(--fst-space-12) var(--fst-space-14);
  background: var(--fst-navy-950);
}

.fst-page-hero--service .fst-page-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fst-page-hero--service .fst-page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.05) brightness(0.55);
}

.fst-page-hero--service .fst-page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(6, 13, 24, 0.92) 0%, rgba(6, 13, 24, 0.78) 42%, rgba(6, 13, 24, 0.45) 100%),
    linear-gradient(to top, rgba(6, 13, 24, 0.55), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(37, 99, 235, 0.35), transparent 45%),
    radial-gradient(ellipse at 70% 90%, rgba(249, 115, 22, 0.18), transparent 40%);
  pointer-events: none;
}

.fst-page-hero--service .fst-page-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--fst-space-8);
  align-items: center;
}

.fst-page-hero--service .fst-page-hero__copy {
  max-width: 36rem;
}

.fst-page-hero--service .fst-page-hero__title {
  max-width: 14ch;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.fst-page-hero--service .fst-page-hero__lead {
  margin-top: var(--fst-space-4);
  margin-bottom: var(--fst-space-6);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 42ch;
}

.fst-service-hero__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 4 / 3;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.fst-service-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.06);
  transition: transform 0.9s var(--fst-ease);
}

.fst-page-hero--service:hover .fst-service-hero__frame img {
  transform: scale(1.04);
}

.fst-service-hero__frame-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 13, 24, 0.55) 0%, transparent 50%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.2), transparent 50%);
  pointer-events: none;
}

.fst-service-hero__frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  pointer-events: none;
}

.fst-service-hero__badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem 0.55rem 0.55rem;
  border-radius: 999px;
  color: #eff6ff;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.fst-service-hero__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.7), rgba(15, 23, 42, 0.85));
  color: #dbeafe;
}

.fst-service-hero__badge-icon svg,
.fst-service-hero__badge-icon .fst-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

@media (min-width: 900px) {
  .fst-page-hero--service .fst-page-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--fst-space-12);
  }
}

@media (max-width: 899px) {
  .fst-page-hero--service .fst-page-hero__visual {
    order: -1;
  }

  .fst-service-hero__frame {
    aspect-ratio: 16 / 10;
    max-width: 34rem;
  }
}

.fst-section--compact {
  padding-block: var(--fst-space-10);
}

.fst-section--service-intro {
  padding-top: var(--fst-space-8);
  padding-bottom: var(--fst-space-8);
}

.fst-service-highlights {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--fst-space-8);
}

.fst-service-highlight {
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.fst-service-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 0.65rem;
  border-radius: 11px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.14);
}

.fst-service-highlight__icon svg,
.fst-service-highlight__icon .fst-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.fst-service-highlight h2 {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--fst-navy-950, #0f172a);
}

.fst-service-highlight p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fst-slate-600, #475569);
}

@media (min-width: 900px) {
  .fst-service-highlights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fst-service-intro__copy {
  max-width: 52rem;
}

.fst-service-intro__copy p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fst-slate-700, #334155);
}

.fst-service-duo {
  display: grid;
  gap: 1rem;
}

.fst-service-duo__card {
  padding: 1.35rem 1.4rem;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.fst-service-duo__card--accent {
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.95)),
    #fff;
  border-color: rgba(37, 99, 235, 0.18);
}

.fst-service-duo__card h2 {
  margin: 0.3rem 0 0.7rem;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
}

.fst-service-duo__card p:last-child {
  margin: 0;
  color: var(--fst-slate-600, #475569);
  line-height: 1.65;
}

@media (min-width: 800px) {
  .fst-service-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.fst-service-feature-grid {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fst-service-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.fst-service-feature__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #eff6ff;
  background: linear-gradient(145deg, #2563eb, #1e3a8a);
}

.fst-service-feature__text {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--fst-navy-950, #0f172a);
  padding-top: 0.25rem;
}

@media (min-width: 900px) {
  .fst-service-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fst-service-benefit-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fst-service-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.05rem 1.1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.fst-service-benefit__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

.fst-service-benefit__icon svg,
.fst-service-benefit__icon .fst-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.fst-service-benefit h3 {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--fst-navy-950, #0f172a);
}

@media (min-width: 900px) {
  .fst-service-benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fst-service-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fst-step;
}

.fst-service-step {
  counter-increment: fst-step;
  position: relative;
  padding: 0.95rem 1.05rem 0.95rem 3.4rem;
  border-radius: 0.95rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.5;
  color: var(--fst-slate-700, #334155);
}

.fst-service-step::before {
  content: counter(fst-step, decimal-leading-zero);
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}

@media (min-width: 800px) {
  .fst-service-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fst-service-use-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fst-service-use {
  padding: 1.15rem 1.2rem;
  border-radius: 1rem;
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.98)),
    #fff;
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.fst-service-use h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--fst-navy-950, #0f172a);
}

@media (min-width: 900px) {
  .fst-service-use-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fst-stat em {
  font-style: normal;
  font-size: 0.7em;
  opacity: 0.55;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */

.fst-404 {
  min-height: calc(100vh - var(--fst-header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--fst-space-16) var(--fst-space-20);
  text-align: center;
}

.fst-404__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(37, 99, 235, 0.28), transparent 70%),
    radial-gradient(ellipse 40% 35% at 80% 85%, rgba(6, 182, 212, 0.12), transparent 65%),
    radial-gradient(ellipse 35% 30% at 15% 75%, rgba(249, 115, 22, 0.08), transparent 60%);
}

.fst-404__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fst-404__code {
  margin: 0 0 var(--fst-space-2);
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  font-weight: var(--fst-weight-extrabold);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: transparent;
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.55) 0%, rgba(37, 99, 235, 0.15) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.fst-404 .fst-eyebrow {
  margin-bottom: var(--fst-space-3);
}

.fst-404 h1 {
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: var(--fst-space-4);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fst-404 .fst-page-hero__lead,
.fst-404__lead {
  max-width: 38ch;
  margin-inline: auto;
  margin-bottom: var(--fst-space-8);
}

.fst-404__actions {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--fst-space-10);
}

.fst-404__tools {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fst-space-5);
}

.fst-404 .fst-search-form {
  width: 100%;
}

.fst-404 .fst-form__row {
  display: flex;
  gap: var(--fst-space-3);
  align-items: stretch;
}

.fst-404 .fst-form__input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.fst-404 .fst-form__input::placeholder {
  color: rgba(226, 232, 240, 0.55);
}

.fst-404 .fst-form__input:focus {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(255, 255, 255, 0.09);
}

.fst-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.fst-404__chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(226, 232, 240, 0.9);
}

.fst-404__chip:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(147, 197, 253, 0.45);
  color: #fff;
}

@media (max-width: 560px) {
  .fst-404__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fst-404__actions .fst-btn {
    width: 100%;
    justify-content: center;
  }

  .fst-404 .fst-form__row {
    flex-direction: column;
  }
}

/* Portfolio media mockups ? win over legacy card skeleton rules */
.fst-portfolio-card__media .fst-mockup--card .fst-mockup__body {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 0;
  height: calc(100% - 46px);
}

.fst-portfolio-card__media .fst-mockup--card .fst-mockup__body--saas,
.fst-portfolio-card__media .fst-mockup--card .fst-mockup__body--ops {
  grid-template-columns: 1fr;
}