/* Public editorial illustrations; customer gallery images keep their own treatment. */
body.fg-home::before {
  opacity: .15;
  background: radial-gradient(rgba(106, 155, 218, .42) .7px, transparent .7px) 0 0 / 28px 28px;
}
.fg-brand, .fg-hub-logo, .fg-footer-brand { background: transparent; }
.fg-brand img, .fg-hub-logo img, .fg-footer-brand img { object-fit: contain; }
.fg-hero { min-height: 780px; }
.fg-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 780px; gap: 44px; padding-block: 64px 260px; }
.fg-hero-visual { min-width: 0; min-height: auto; align-self: center; }
.fg-hero-cards { right: 0; bottom: 30px; left: 0; }
.fg-workspace { overflow: hidden; border: 1px solid #509df14d; border-radius: 24px; background: linear-gradient(150deg, #112135, #0a101c); box-shadow: 0 28px 90px #02050a99, 0 0 70px #3c5cee15; }
.fg-workspace-top { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-bottom: 1px solid var(--fg-line); color: var(--fg-soft); font-size: 11px; }
.fg-workspace-top small { margin-left: auto; color: var(--fg-muted); font-size: 10px; }
.fg-workspace-light { flex-shrink: 0; width: 6px; height: 6px; background: var(--fg-teal); border-radius: 50%; box-shadow: 0 0 12px #26c9b566; }
.fg-workspace-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 18px; }
.fg-workspace-heading .fg-eyebrow { font-size: 9px; letter-spacing: .15em; }
.fg-workspace-heading h2 { margin: 8px 0 0; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -.04em; font-weight: 600; }
.fg-workspace-spark { color: var(--fg-violet); font-size: 44px; }
.fg-project-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 24px; }
.fg-project-previews figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--fg-line); border-radius: 12px; background: #0a1423; }
.fg-project-previews img { width: 100%; height: 180px; object-fit: cover; object-position: 58% 38%; }
.fg-project-previews figure:last-child img { object-position: 58% 30%; }
.fg-project-previews figcaption { display: grid; gap: 5px; padding: 12px; }
.fg-project-previews strong { font-size: 13px; font-weight: 600; }
.fg-project-previews figcaption span { color: var(--fg-soft); font-size: 10px; }
.fg-editorial-photo { filter: saturate(.68) contrast(.98) brightness(1.06); }
.fg-workspace-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 22px 24px; color: #d3e1f1; font-size: 11px; }
.fg-workspace-flow span { display: flex; gap: 6px; align-items: center; }
.fg-workspace-flow b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--fg-teal); background: #26c9b50d; border: 1px solid #26c9b533; font-size: 9px; font-weight: 500; }
.fg-workspace-flow i { color: #61758f; font-style: normal; }
.fg-client-actions { display: grid; gap: 12px; }
.fg-client-actions span { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--fg-line); border-radius: 10px; color: var(--fg-soft); font-size: 13px; }
.fg-client-actions b { color: var(--fg-teal); font-size: 18px; }
.fg-resource-gallery img, .fg-resource-album img { position: absolute; inset: 0; filter: saturate(.58) brightness(1.08); }
.fg-resource-gallery img { object-position: 58% 44%; }
.fg-resource-album img { object-position: 68% center; }
.fg-demo-visual { min-width: 0; display: grid; grid-template-rows: 1fr auto; margin: 26px; padding: 18px; border: 1px solid var(--fg-line); border-radius: 16px; background: #09131f; }
.fg-visual-stage[hidden] { display: none; }
.fg-visual-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.fg-visual-chip { display: inline-block; width: fit-content; padding: 5px 8px; border: 1px solid #26c9b533; border-radius: 6px; color: #66d6c7; font-size: 10px; font-weight: 500; }
.fg-selection-preview figure { position: relative; margin: 0; overflow: hidden; border-radius: 10px; }
.fg-selection-preview img { width: 100%; height: 230px; object-fit: cover; object-position: 60% 44%; }
.fg-selection-preview figcaption { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 6px; background: #062a2de8; color: #96f2df; font-size: 11px; }
.fg-selection-comment { display: flex; align-items: center; gap: 12px; padding-top: 18px; }
.fg-selection-comment > span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; color: #9f7bff; background: #9f7bff12; font-size: 22px; }
.fg-selection-comment strong { font-size: 12px; }
.fg-selection-comment p { margin: 4px 0 0; color: var(--fg-soft); font-size: 12px; }
.fg-demo-badge { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--fg-line); color: var(--fg-teal); font-size: 11px; }
.fg-review-preview { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; align-items: center; gap: 18px; }
.fg-review-preview img { width: 100%; height: 290px; object-fit: cover; object-position: 60% center; border-radius: 10px; }
.fg-review-preview strong { display: block; font-size: 18px; line-height: 1.35; }
.fg-review-preview p { margin: 12px 0 18px; color: var(--fg-soft); font-size: 12px; line-height: 1.7; }
.fg-review-spark { display: block; margin-bottom: 16px; color: var(--fg-violet); font-size: 32px; }
.fg-desktop-preview { display: grid; gap: 7px; padding: 8px; }
.fg-desktop-preview > div { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 16px; border: 1px solid var(--fg-line); border-radius: 10px; background: linear-gradient(110deg, #132237, #0b1523); }
.fg-desktop-preview > div > span { grid-row: span 2; font-size: 28px; text-align: center; }
.fg-desktop-preview strong { font-size: 12px; letter-spacing: .08em; }
.fg-desktop-preview small { color: var(--fg-soft); font-size: 11px; }
.fg-desktop-preview > i { color: #58708d; text-align: center; font-style: normal; font-size: 14px; }
@media (max-width: 1260px) {
  .fg-hero-grid { gap: 28px; }
  .fg-hero h1 { font-size: clamp(44px, 4.6vw, 64px); }
}
@media (max-width: 980px) {
  .fg-hero { min-height: auto; }
  .fg-hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 20px; padding-block: 54px 60px; }
  .fg-hero-visual { width: 100%; max-width: 700px; margin: 22px 0 0; }
  .fg-hero-cards { position: relative; right: auto; bottom: auto; left: auto; margin-top: 0; }
}
@media (max-width: 700px) {
  .fg-demo-visual { margin: 16px; padding: 14px; }
}
@media (max-width: 660px) {
  .fg-hero-grid { padding-top: 42px; }
  .fg-hero h1 { font-size: clamp(42px, 10.5vw, 62px); }
  .fg-workspace-top { padding-inline: 14px; font-size: 10px; }
  .fg-workspace-heading { padding: 20px 16px 16px; }
  .fg-project-previews { padding-inline: 16px; gap: 9px; }
  .fg-project-previews img { height: clamp(138px, 32vw, 200px); }
  .fg-project-previews figcaption { padding: 10px; }
  .fg-project-previews figcaption span { line-height: 1.5; }
  .fg-workspace-flow { padding: 18px 16px; font-size: 10px; }
}