/* Reusable background motifs from Brand Book p.04 "Universo Visual":
   deep navy field, digital dot grid, ascending amber light-trails, sparse glow.
   No photography or illustration ships with the brand; these CSS motifs stand
   in for the artwork so screens stay on-identity. */

.sf-field{background:
  radial-gradient(120% 90% at 88% 8%,rgba(201,164,106,.14) 0%,transparent 55%),
  radial-gradient(90% 70% at 4% 96%,rgba(30,53,87,.55) 0%,transparent 60%),
  linear-gradient(168deg,var(--navy-800) 0%,var(--navy-900) 46%,var(--navy-1000) 100%);
  color:var(--text-primary)}

.sf-dotgrid{background-image:radial-gradient(rgba(201,164,106,.22) 1px,transparent 1px);background-size:14px 14px}
.sf-dotgrid-fade{-webkit-mask-image:radial-gradient(70% 70% at 78% 24%,#000 0%,transparent 72%);mask-image:radial-gradient(70% 70% at 78% 24%,#000 0%,transparent 72%)}
.sf-linegrid{background-image:linear-gradient(rgba(201,164,106,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(201,164,106,.10) 1px,transparent 1px);background-size:48px 48px}

/* Ascending light trail — the single most recognisable brand gesture. */
.sf-trail{position:relative;overflow:hidden}
.sf-trail::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:120%;pointer-events:none;
  background:
   radial-gradient(60% 40% at 72% 62%,rgba(225,197,143,.30) 0%,transparent 60%),
   radial-gradient(40% 24% at 40% 84%,rgba(201,164,106,.18) 0%,transparent 60%);
  filter:blur(2px)}

.sf-rule{height:1px;border:0;background:var(--rule-accent);opacity:.85}
.sf-rule-short{width:56px}
.sf-hairline{border:var(--border-width-hairline) solid var(--border-hairline)}

.sf-scrim{background:var(--overlay-scrim)}

/* Approved background plates (supplied artwork, assets/backgrounds/*.png).
   All five share the same composition: navy void on the left, gold data
   structure rising on the right. Anchor them right and lay text over the left. */
.sf-plate{background-repeat:no-repeat;background-position:right center;background-size:cover}
.sf-plate-1{background-image:url("../assets/backgrounds/bg-01.png")}
.sf-plate-2{background-image:url("../assets/backgrounds/bg-02.png")}
.sf-plate-3{background-image:url("../assets/backgrounds/bg-03.png")}
.sf-plate-4{background-image:url("../assets/backgrounds/bg-04.png")}
.sf-plate-5{background-image:url("../assets/backgrounds/bg-05.png")}