/* Public Experience 043 — shared premium treatment for Forge and product surfaces.
   This layer intentionally contains only presentation: navigation proportions,
   atmosphere, glass depth and approved product-emblem rendering. */
:root {
  --vf-premium-ink: #020302;
  --vf-premium-graphite: rgba(8, 11, 8, 0.68);
  --vf-premium-line: rgba(255, 210, 82, 0.28);
  --vf-premium-gold: #ffd24a;
  --vf-premium-lime: #a2ff13;
}

body.forge-public-surface,
body[data-product],
body:has(.system-gate) {
  background-color: var(--vf-premium-ink);
}

body.forge-public-surface::before,
body[data-product]::before,
body:has(.system-gate)::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 3, 2, 0.35), rgba(2, 3, 2, 0.86) 74%, rgba(2, 3, 2, 0.96)),
    radial-gradient(circle at 50% 20%, rgba(255, 184, 48, 0.11), transparent 34%),
    url("/assets/img/public-experience-043-forge-chamber.png") center top / max(1440px, 100vw) auto no-repeat;
  opacity: 0.72;
}

body.forge-public-surface > main,
body.forge-public-surface > footer,
body[data-product] > main,
body[data-product] > footer,
body:has(.system-gate) > main,
body:has(.system-gate) > footer {
  position: relative;
  z-index: 1;
}

/* One shared navigation family: a glass rail with the same brand scale,
   rhythm, action hierarchy and mobile behaviour across Forge and products. */
.site-header {
  min-height: 76px;
  border-bottom-color: var(--vf-premium-line);
  background:
    linear-gradient(90deg, rgba(1, 2, 1, 0.96), rgba(8, 11, 7, 0.8) 50%, rgba(1, 2, 1, 0.96));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.38),
    inset 0 -1px 0 rgba(162, 255, 19, 0.055),
    inset 0 1px 0 rgba(255, 231, 151, 0.06);
  backdrop-filter: blur(22px) saturate(130%);
}

.brand > img {
  filter:
    drop-shadow(0 0 14px rgba(255, 210, 74, 0.3))
    drop-shadow(0 0 26px rgba(162, 255, 19, 0.1));
}

.brand::after {
  background: linear-gradient(96deg, #d4ff5b 0%, #ffe16f 50%, #ff9f22 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.main-nav > a,
.nav-group > button {
  color: #e7e5dc;
}

.main-nav > a:hover,
.main-nav > a:focus-visible,
.nav-group > button:hover,
.nav-group > button:focus-visible {
  color: var(--vf-premium-lime);
  text-shadow: 0 0 14px rgba(162, 255, 19, 0.2);
}

.dropdown {
  border-color: rgba(255, 210, 82, 0.38);
  background:
    linear-gradient(145deg, rgba(20, 24, 16, 0.82), rgba(3, 5, 3, 0.96)),
    url("/assets/img/public-experience-043-forge-chamber.png") center / cover;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.72), inset 0 1px rgba(255, 238, 176, 0.08);
}

.dropdown a {
  border-bottom-color: rgba(255, 214, 88, 0.08);
}

.portal-btn,
.outline-btn,
.gold-btn {
  min-height: 43px;
  border-radius: 13px;
}

.portal-btn,
.outline-btn {
  border-color: rgba(255, 210, 82, 0.34);
  background: linear-gradient(180deg, rgba(18, 22, 15, 0.82), rgba(3, 5, 3, 0.95));
}

/* Product cards and detail modules deliberately reveal the chamber through the
   glass. The approved 3D emblems remain the visual focus, without app tiles. */
.vf-product-card-clean,
body[data-product="overview"] .overview-card,
body[data-product]:not([data-product="overview"]) .teaser-copy,
body[data-product]:not([data-product="overview"]) .teaser-aside {
  background-color: var(--vf-premium-graphite);
  backdrop-filter: blur(19px) saturate(132%);
}

.vf-product-card-clean {
  border-color: rgba(255, 214, 99, 0.3);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 243, 190, 0.09),
    inset 0 0 0 1px rgba(162, 255, 19, 0.025);
}

.vf-product-media {
  border-color: rgba(255, 215, 94, 0.2);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 207, 66, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(8, 11, 8, 0.54), rgba(2, 3, 2, 0.76));
  box-shadow: inset 0 1px rgba(255, 242, 181, 0.07), 0 18px 38px rgba(0, 0, 0, 0.26);
}

.vf-product-card-clean img,
.forge-family-rail__marks img,
body[data-product] .overview-card img,
body[data-product] .teaser-aside img[data-asset="icon"] {
  filter:
    saturate(1.12)
    contrast(1.09)
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 22px rgba(255, 205, 69, 0.22))
    drop-shadow(0 0 34px rgba(162, 255, 19, 0.08));
}

.forge-family-rail__marks img {
  mix-blend-mode: normal;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 74, 0.11), rgba(2, 3, 2, 0.82) 68%);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 94, 0.1);
}

/* The entrance is branded by the master sigil. Product marks remain available
   as the visible family rail directly beneath it, without competing in the
   hero composition. */
.system-card__visual--forge .forge-product-orbit {
  display: none;
}

a.vf-product-card-clean[href="/products/coworker/"] .vf-product-media img,
.forge-family-rail__marks a:nth-child(4) img {
  clip-path: none;
}

body[data-product]:not([data-product="overview"]) .teaser-hero,
body[data-product="overview"] .teaser-hero {
  background:
    linear-gradient(104deg, rgba(2, 3, 2, 0.9) 2%, rgba(7, 10, 7, 0.54) 57%, rgba(2, 3, 2, 0.86) 100%),
    url("/assets/img/public-experience-043-forge-chamber.png") center / cover;
  box-shadow:
    0 32px 74px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 239, 174, 0.08),
    inset 0 0 0 1px rgba(255, 205, 69, 0.035);
}

@media (max-width: 720px) {
  body.forge-public-surface::before,
  body[data-product]::before,
  body:has(.system-gate)::before {
    background-size: auto 860px;
    background-position: center 18px;
    opacity: 0.64;
  }

  .site-header {
    min-height: 68px;
  }

  .vf-product-card-clean,
  body[data-product="overview"] .overview-card {
    backdrop-filter: blur(14px) saturate(122%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .vf-product-card-clean,
  body[data-product] .teaser-hero {
    backdrop-filter: none;
  }
}