/* REL 6.17.35 — restrained signal color system
   Color is a navigation / identity layer, not decoration. Keep page fields dark,
   keep reading surfaces calm, and use low-saturation tint only where it helps
   separate systems, decisions, calls-to-action and working modules. */

:root{
  --sig-radar:91,180,197;
  --sig-distribution:210,168,79;
  --sig-operator:117,151,181;
  --sig-search:130,168,132;
  --sig-client:166,132,166;
}

/* --------------------------------------------------------------------------
   HOME // give the three public doors distinct signal fields without turning
   the homepage into a color catalogue.
   -------------------------------------------------------------------------- */
body:not(.system-page) .doors .door{
  isolation:isolate;
  overflow:hidden;
}
body:not(.system-page) .doors .door::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.95;
}
body:not(.system-page) .doors .door:nth-child(1){
  border-color:rgba(var(--sig-radar),.20);
  background:linear-gradient(145deg,#0a171a,#050708 72%)!important;
}
body:not(.system-page) .doors .door:nth-child(1)::before{
  background:radial-gradient(circle at 88% 12%,rgba(var(--sig-radar),.13),transparent 36%);
}
body:not(.system-page) .doors .door:nth-child(2){
  border-color:rgba(var(--sig-operator),.18);
  background:linear-gradient(145deg,#111513,#060707 74%)!important;
}
body:not(.system-page) .doors .door:nth-child(2)::before{
  background:
    radial-gradient(circle at 87% 8%,rgba(var(--sig-distribution),.10),transparent 30%),
    radial-gradient(circle at 12% 92%,rgba(var(--sig-search),.08),transparent 34%),
    radial-gradient(circle at 92% 84%,rgba(var(--sig-operator),.08),transparent 30%);
}
body:not(.system-page) .doors .door:nth-child(3){
  border-color:rgba(var(--sig-client),.20);
  background:linear-gradient(145deg,#171119,#070607 74%)!important;
}
body:not(.system-page) .doors .door:nth-child(3)::before{
  background:radial-gradient(circle at 88% 12%,rgba(var(--sig-client),.14),transparent 38%);
}
body:not(.system-page) .doors .door:nth-child(1) .num{color:rgb(125,205,220)}
body:not(.system-page) .doors .door:nth-child(2) .num{color:#d2a84f}
body:not(.system-page) .doors .door:nth-child(3) .num{color:rgb(195,158,194)}
body:not(.system-page) .doors .door:hover{
  box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.025);
}
body:not(.system-page) .last-signal{
  background:
    radial-gradient(circle at 88% 20%,rgba(var(--sig-client),.055),transparent 31%),
    radial-gradient(circle at 15% 88%,rgba(var(--sig-distribution),.045),transparent 28%),
    #080807;
}

/* --------------------------------------------------------------------------
   SYSTEM OVERVIEW // preserve the existing beautiful card fields and make the
   color read as a deliberate identity system instead of five isolated cards.
   -------------------------------------------------------------------------- */
.systems-overview .system-card{
  position:relative;
  overflow:hidden;
}
.systems-overview .system-card .num,
.systems-overview .system-card .system-index{
  text-shadow:0 0 16px var(--card-glow);
}
.systems-overview .system-card::before{
  box-shadow:0 0 24px color-mix(in srgb,var(--card-glow) 54%,transparent);
}
.systems-overview .system-card:hover{
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   DETAIL PAGES // each system keeps its own low-saturation field all the way
   through the explanatory modules. Paper hero cards remain paper for contrast.
   -------------------------------------------------------------------------- */
body.system-search-radar{--signal-rgb:var(--sig-radar)}
body.system-distribution-radar{--signal-rgb:var(--sig-distribution)}
body.system-operator{--signal-rgb:var(--sig-operator)}
body.system-search-systems{--signal-rgb:var(--sig-search)}
body.system-client-portals{--signal-rgb:var(--sig-client)}

body.system-page .copy{
  box-shadow:0 26px 74px rgba(var(--signal-rgb),.055),0 10px 38px rgba(0,0,0,.20);
}
body.system-page .copy::after{
  border-color:rgba(var(--signal-rgb),.12)!important;
}
body.system-page .section{
  position:relative;
  isolation:isolate;
}
body.system-page .section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 88% 8%,rgba(var(--signal-rgb),.035),transparent 32%);
}
body.system-page .caps .cap{
  background:
    radial-gradient(circle at 100% 0,rgba(var(--signal-rgb),.085),transparent 40%),
    linear-gradient(145deg,rgba(var(--signal-rgb),.035),rgba(5,5,5,.78));
  border-color:rgba(var(--signal-rgb),.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
body.system-page .caps .cap:nth-child(2){
  background:
    radial-gradient(circle at 0 100%,rgba(var(--signal-rgb),.065),transparent 42%),
    linear-gradient(145deg,rgba(var(--signal-rgb),.026),rgba(5,5,5,.8));
}
body.system-page .caps .cap:nth-child(3){
  background:
    radial-gradient(circle at 100% 100%,rgba(var(--signal-rgb),.072),transparent 42%),
    linear-gradient(145deg,rgba(var(--signal-rgb),.028),rgba(5,5,5,.8));
}
body.system-page .caps .cap b,
body.system-page .section-index{
  color:color-mix(in srgb,rgb(var(--signal-rgb)) 70%,#d2a84f 30%);
}
body.system-page .threshold>div{
  background:
    radial-gradient(circle at 88% 10%,rgba(var(--signal-rgb),.085),transparent 38%),
    linear-gradient(145deg,rgba(var(--signal-rgb),.032),rgba(4,4,4,.90));
  border-color:rgba(var(--signal-rgb),.19)!important;
}
body.system-page .threshold>div+div{
  background:
    radial-gradient(circle at 8% 88%,rgba(var(--signal-rgb),.06),transparent 35%),
    linear-gradient(145deg,rgba(var(--signal-rgb),.025),rgba(4,4,4,.92));
}
body.system-page .protocol span{
  background:rgba(var(--signal-rgb),.025);
  border-color:rgba(var(--signal-rgb),.13)!important;
}
body.system-page .button.ghost{
  background:rgba(var(--signal-rgb),.025);
  border-color:rgba(var(--signal-rgb),.23)!important;
}
body.system-page .button.ghost:hover{
  background:rgba(var(--signal-rgb),.075);
  border-color:rgba(var(--signal-rgb),.48)!important;
}

/* --------------------------------------------------------------------------
   CONTACT // a restrained cross-system surface: blue for the problem/context
   side, gold/plum for the route into the machinery. No full-page color wash.
   -------------------------------------------------------------------------- */
.signal .gate>div:first-child{
  background:
    radial-gradient(circle at 8% 100%,rgba(var(--sig-operator),.08),transparent 38%),
    linear-gradient(145deg,#0e1217,#050607)!important;
  border-color:rgba(var(--sig-operator),.18)!important;
}
.signal .gate>div:last-child{
  background:
    radial-gradient(circle at 100% 0,rgba(var(--sig-distribution),.085),transparent 34%),
    radial-gradient(circle at 0 100%,rgba(var(--sig-client),.055),transparent 36%),
    linear-gradient(145deg,#12100c,#060505)!important;
  border-color:rgba(var(--sig-distribution),.25)!important;
}
.signal .gate>div:first-child .section-index{color:rgb(151,180,205)}
.signal .gate>div:last-child .section-index{color:#d2a84f}
.signal .after{
  position:relative;
  isolation:isolate;
}
.signal .after::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-26px -22px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 100%,rgba(var(--sig-client),.05),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(var(--sig-distribution),.04),transparent 30%);
}

/* --------------------------------------------------------------------------
   Mobile // keep tint visible, but flatter and quieter than desktop.
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  body:not(.system-page) .doors .door::before{opacity:.78}
  body.system-page .section::before{background:radial-gradient(circle at 100% 0,rgba(var(--signal-rgb),.03),transparent 38%)}
  body.system-page .caps .cap,
  body.system-page .threshold>div{background:linear-gradient(145deg,rgba(var(--signal-rgb),.045),rgba(4,4,4,.91))}
  .signal .gate>div:first-child{background:linear-gradient(145deg,rgba(var(--sig-operator),.055),#060708)!important}
  .signal .gate>div:last-child{background:linear-gradient(145deg,rgba(var(--sig-distribution),.05),#070605)!important}
}

@media(prefers-reduced-motion:reduce){
  .systems-overview .system-card:hover,
  body:not(.system-page) .doors .door:hover{transform:none}
}