:root{
  color-scheme:dark;
  --bg:#05070a;
  --panel:rgba(10,13,17,.78);
  --panel2:rgba(14,18,23,.9);
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.16);
  --text:#edf0f3;
  --muted:#7f8893;
  --faint:#3f4750;
  --green:#92d5b2;
  --gold:#ad9568;
  --violet:#8e87a5;
  --max:1180px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0; min-height:100vh; overflow-x:hidden; color:var(--text);
  background:#05070a;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a{color:inherit}.shell{position:relative;z-index:5;width:min(calc(100% - 48px),var(--max));min-height:100vh;margin:auto;display:flex;flex-direction:column}

.system-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(1000px 600px at 72% 30%,rgba(77,91,110,.12),transparent 64%),
  radial-gradient(800px 520px at 18% 75%,rgba(72,60,47,.08),transparent 68%),
  linear-gradient(180deg,#07090d 0%,#05070a 62%,#040507 100%);}
.grid{position:absolute;inset:-12%;opacity:.34;transform:perspective(900px) rotateX(63deg) translateY(36%);transform-origin:center bottom;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to top,black 20%,transparent 82%)}
.radar{position:absolute;border:1px solid rgba(255,255,255,.045);border-radius:50%}
.radar:before,.radar:after{content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.035);border-radius:50%}.radar:after{inset:31%}
.radar-a{width:680px;height:680px;right:-220px;top:90px}.radar-b{width:440px;height:440px;left:-180px;bottom:-40px}
.trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);transform-origin:left center}
.trace-a{width:520px;right:10%;top:27%;transform:rotate(-28deg)}.trace-b{width:420px;left:8%;bottom:23%;transform:rotate(18deg)}
.node{position:absolute;width:5px;height:5px;border:1px solid rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 18px rgba(255,255,255,.22)}
.n1{right:28%;top:20%}.n2{right:15%;top:43%}.n3{left:22%;bottom:26%}.n4{left:44%;top:17%}
.coordinates{position:absolute;color:rgba(255,255,255,.14);font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}.c1{right:42px;bottom:42px;writing-mode:vertical-rl}.c2{left:42px;top:46%;transform:rotate(-90deg);transform-origin:left top}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 180px rgba(0,0,0,.7)}
.noise{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.scanlines{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.08;background:repeating-linear-gradient(180deg,transparent 0,transparent 4px,rgba(255,255,255,.014) 5px)}

.topbar{min-height:82px;padding:max(22px,env(safe-area-inset-top)) 0 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.21em}.brand-icon{width:24px;height:24px;fill:none;stroke:#dce1e5;stroke-width:1}.brand-icon circle{fill:#dce1e5;stroke:none}
.system-meta{display:flex;align-items:center;gap:30px;color:#aab2bb;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;font-weight:600}.live{display:inline-flex;align-items:center;gap:9px;color:#b9c3cc}.clock{font-size:15px;color:#e0e5e9;font-weight:700;letter-spacing:.11em}.live i,.status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(146,213,178,.6);animation:pulse 2.4s ease-in-out infinite}

.hero{padding:clamp(78px,10vw,128px) 0 48px;max-width:900px}.kicker{display:flex;align-items:center;gap:13px;color:#7e8892;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}.kicker b{width:28px;height:1px;background:#3c434b}
h1{margin:24px 0 0;font-size:clamp(52px,6.8vw,84px);font-weight:500;line-height:.94;letter-spacing:-.055em}h1 em{font-style:normal;color:#7c858f;font-weight:400}
.hero p{margin:26px 0 0;max-width:670px;color:#9ba4ad;font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:840px;padding:0 0 52px}
.project-card{position:relative;min-height:242px;padding:18px 18px 15px;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,18,23,.82),rgba(8,10,14,.82));overflow:hidden;isolation:isolate;transition:border-color .28s ease,background .28s ease,box-shadow .28s ease}
.project-card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:linear-gradient(135deg,rgba(255,255,255,.045),transparent 45%);transition:opacity .28s ease}.project-card:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.022) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.02) 50%,transparent 50.2%);background-size:34px 34px;opacity:.35}
.project-card:hover,.project-card:focus-visible{border-color:var(--line2);background:linear-gradient(180deg,rgba(18,22,28,.94),rgba(9,12,16,.94));box-shadow:0 26px 70px rgba(0,0,0,.38);outline:none}.project-card:hover:before{opacity:1}
.card-glow{position:absolute;width:190px;height:190px;border-radius:50%;filter:blur(60px);opacity:.08;right:-60px;top:-60px;z-index:-1}.lacuna .card-glow{background:var(--gold)}.vesper .card-glow{background:var(--violet)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}.project-symbol{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.018)}.project-symbol svg{width:23px;height:23px;fill:none;stroke:#9aa3ad;stroke-width:1}.status{display:inline-flex;align-items:center;gap:7px;color:#7f9d8e;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em}
.card-body{margin-top:auto;padding-top:30px}.index{display:block;color:#555e68;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;margin-bottom:12px}.card-body h2{margin:0;font:500 22px/1.04 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.015em}.card-body p{margin:13px 0 0;max-width:245px;color:#727c86;font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}
.card-footer{margin-top:18px;padding-top:13px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#9da6af;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.card-footer svg{width:16px;height:16px;fill:none;stroke:#7a838d;stroke-width:1.2}

.lower-system{max-width:840px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:46px}.lower-system div{padding:16px 18px 17px;border-right:1px solid var(--line)}.lower-system div:last-child{border-right:0}.lower-system span{display:block;color:#444c55;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;margin-bottom:8px}.lower-system strong{color:#6f7882;font:400 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.footer{margin-top:auto;min-height:70px;padding:21px 0 max(22px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;color:#444c55;font:8px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}.footer-center{text-align:center}

.unknown .card-glow{background:#66717c;opacity:.045}
.inactive-card{cursor:default;border-style:dashed;background:linear-gradient(180deg,rgba(12,15,19,.62),rgba(7,9,12,.62))}
.inactive-card:hover{border-color:var(--line);background:linear-gradient(180deg,rgba(12,15,19,.62),rgba(7,9,12,.62));box-shadow:none}
.inactive-card:before{display:none}.inactive-card .project-symbol{opacity:.55}.inactive-card .card-body h2{color:#8b939b}.inactive-card .card-body p{color:#59616a}
.status.inactive{color:#59616a}.status.inactive i{background:#4c535b;box-shadow:none;animation:none}.lock-mark{color:#59616a;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}

@keyframes pulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:900px){.projects{grid-template-columns:repeat(2,minmax(0,1fr));max-width:570px}}
@media(max-width:760px){.shell{width:min(calc(100% - 28px),var(--max))}.system-meta{gap:12px}.live{display:none}.hero{padding-top:70px}.projects{grid-template-columns:1fr;max-width:360px}.project-card{min-height:232px}.lower-system{grid-template-columns:1fr;max-width:440px}.lower-system div{border-right:0;border-bottom:1px solid var(--line)}.lower-system div:last-child{border-bottom:0}.footer{flex-direction:column;gap:8px}.footer-center{text-align:left}.c1,.c2{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* v4 — larger cards, locked hover geometry, premium gold edge */
.projects{
  max-width:930px;
  gap:20px;
}
.project-card{
  min-height:268px;
  padding:22px 22px 18px 24px;
  transform:none !important;
  border-width:1px;
  background:linear-gradient(180deg,rgba(15,18,23,.84),rgba(8,10,14,.84));
  transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease;
  will-change:auto;
}
.project-card:before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:3px;
  inset-inline-end:auto;
  z-index:2;
  opacity:1;
  background:linear-gradient(180deg,transparent 0%,rgba(193,158,92,.28) 10%,rgba(224,188,111,.95) 46%,rgba(154,116,59,.62) 78%,transparent 100%);
  box-shadow:0 0 18px rgba(190,145,70,.12);
  transition:box-shadow .24s ease,filter .24s ease;
  pointer-events:none;
}
.project-card:hover,.project-card:focus-visible{
  transform:none !important;
  border-width:1px;
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(18,22,28,.9),rgba(9,12,16,.9));
  box-shadow:0 24px 64px rgba(0,0,0,.36),inset 0 0 0 1px rgba(210,174,104,.025);
}
.project-card:hover:before,.project-card:focus-visible:before{
  opacity:1;
  filter:none;
  box-shadow:0 0 22px rgba(204,159,78,.19);
}
.project-card *,
.project-card:hover *,
.project-card:focus-visible *{
  transform:none !important;
}
.card-footer svg,
.project-card:hover .card-footer svg,
.project-card:focus-visible .card-footer svg{
  transform:none !important;
  transition:stroke .24s ease,opacity .24s ease;
}
.inactive-card:before{
  display:block;
  opacity:.36;
}
.inactive-card:hover:before{
  opacity:.36;
  box-shadow:0 0 18px rgba(190,145,70,.12);
}
@media(max-width:900px){.projects{max-width:640px}}
@media(max-width:760px){.project-card{min-height:252px;padding:21px 20px 17px 23px}}

/* M31 parent network branding */
.brand-copy,.footer-brand{display:flex;flex-direction:column;gap:4px}
.brand-copy strong,.footer-brand strong{font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.21em;color:#f0f2f3}
.brand-copy small,.footer-brand small{font:500 8px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:#777f86}
.footer-brand{text-decoration:none;align-items:flex-start}
.footer-brand strong{font-size:10px}
.footer-brand small{font-size:7px}
.brand:hover strong,.footer-brand:hover strong{color:#c8a85a}
.brand:hover small,.footer-brand:hover small{color:#929aa0}


/* --- Premium footer status bar v9 --- */
.site-footer{
  position:relative;
  z-index:5;
  margin-top:58px;
  border-top:1px solid rgba(206,168,84,.18);
  background:
    linear-gradient(180deg,rgba(11,16,23,.72),rgba(7,11,16,.92)),
    linear-gradient(90deg,rgba(206,168,84,.035),transparent 36%,rgba(206,168,84,.025));
  box-shadow:0 -18px 50px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:190px;
  height:1px;
  background:linear-gradient(90deg,#d6ad58,rgba(214,173,88,.08),transparent);
  box-shadow:0 0 18px rgba(214,173,88,.22);
}
.footer-main{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  min-height:116px;
  padding:26px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px;
}
.footer-brand{min-width:300px}
.footer-domain{
  display:inline-block;
  color:#f0f3f5;
  text-decoration:none;
  font:700 17px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  transition:color .18s ease,text-shadow .18s ease;
}
.footer-domain:hover{
  color:#d8b86c;
  text-shadow:0 0 18px rgba(216,184,108,.18);
}
.footer-network{
  margin-top:10px;
  color:#aab3bc;
  font:600 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.17em;
}
.footer-system{
  text-align:right;
  color:#949ea8;
  font:600 11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;
}
.footer-policy{color:#c2c9cf}
.footer-node{
  margin-top:3px;
  color:#d0a955;
  letter-spacing:.13em;
}
.footer-version{
  margin-top:4px;
  color:#7f8993;
  font-size:10px;
  letter-spacing:.1em;
}
@media (max-width:760px){
  .footer-main{
    width:min(100% - 34px,1180px);
    min-height:auto;
    padding:22px 0 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .footer-brand{min-width:0}
  .footer-system{text-align:left}
}

/* --- Compact premium footer v11 --- */
.site-footer{
  margin-top:44px !important;
}
.footer-main{
  min-height:82px !important;
  padding:17px 0 16px !important;
  gap:34px !important;
}
.footer-brand{
  min-width:270px !important;
}
.footer-domain{
  font-size:15px !important;
}
.footer-network{
  margin-top:7px !important;
  font-size:10px !important;
}
.footer-system{
  font-size:10px !important;
  line-height:1.45 !important;
}
.footer-node{
  margin-top:1px !important;
}
.footer-version{
  margin-top:2px !important;
  font-size:9px !important;
}
@media (max-width:760px){
  .footer-main{
    padding:17px 0 16px !important;
    gap:14px !important;
  }
}

/* --- Premium branded top bar + hero refinement v12 --- */
.topbar{
  background:
    linear-gradient(180deg,rgba(11,16,23,.88),rgba(7,11,16,.76)),
    linear-gradient(90deg,rgba(206,168,84,.05),transparent 38%,rgba(206,168,84,.025)) !important;
  border-bottom:1px solid rgba(206,168,84,.18) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:190px;
  height:1px;
  background:linear-gradient(90deg,#d6ad58,rgba(214,173,88,.08),transparent);
  box-shadow:0 0 18px rgba(214,173,88,.22);
}

/* Slightly larger top M31 identity without the oversized v10 treatment */
.brand{gap:12px !important}
.brand-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
}
.brand-mark svg{
  width:34px !important;
  height:34px !important;
}
.brand-name,
.brand strong{
  font-size:14px !important;
  letter-spacing:.16em !important;
}
.brand-sub,
.brand small{
  margin-top:4px !important;
  font-size:9.5px !important;
  color:#9ba5ae !important;
}

/* Main left hero title and description: modest increase */
.hero{
  max-width:940px !important;
}
.hero h1,
h1{
  font-size:clamp(56px,7vw,88px) !important;
}
.hero p{
  max-width:710px !important;
  font-size:15px !important;
  line-height:1.8 !important;
  color:#a3acb5 !important;
}

/* Preserve clear right-side system status */
.system-meta{
  font-size:12px !important;
}
.clock{
  font-size:15px !important;
}

@media (max-width:760px){
  .brand-mark,
  .brand-mark svg{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
  }
  .brand-name,
  .brand strong{font-size:12px !important}
  .brand-sub,
  .brand small{font-size:8.5px !important}
  .hero h1,
  h1{font-size:clamp(43px,12vw,60px) !important}
  .hero p{font-size:13px !important}
}

/* --- Clean transparent top bar v13 --- */
.topbar{
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Keep the thin branded separator and gold accent from v12 */

/* --- True transparent header v14 --- */
main.shell{
  background:none !important;
  background-color:transparent !important;
}
header.topbar,
.topbar{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:auto !important;
}
.topbar::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
.brand,
.brand-copy,
.system-meta{
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
/* keep only the bottom separator + gold accent */
.topbar{
  border-bottom:1px solid rgba(206,168,84,.18) !important;
}

/* --- Header icon proportion refinement v15 --- */
.brand{
  align-items:center !important;
  gap:13px !important;
}
.brand-mark{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.brand-mark svg{
  width:44px !important;
  height:44px !important;
  display:block !important;
}
@media (max-width:760px){
  .brand-mark{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
  }
  .brand-mark svg{
    width:39px !important;
    height:39px !important;
  }
}

/* --- Transparent footer with original upper gradient line v17 --- */
.site-footer{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:0 !important;
}
/* Preserve the original upper separator and its gold gradient accent */
.site-footer::before{
  display:block !important;
}
/* Remove any lower decorative/bottom line completely */
.site-footer::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
}
.footer-main,
.footer-brand,
.footer-system{
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* --- Footer: absolutely no lower line v18 --- */
.site-footer{
  border-bottom:none !important;
  outline:none !important;
}
.site-footer .footer-main,
.site-footer .footer-brand,
.site-footer .footer-system{
  border-bottom:none !important;
  outline:none !important;
}
.site-footer::after,
.site-footer .footer-main::after{
  content:none !important;
  display:none !important;
  height:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
/* Remove lower edge decoration from the outer shell/page container */
.shell::after,
main::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
/* keep ONLY the existing footer top separator and gold ::before accent */

/* --- v19: remove the apparent footer-bottom line correctly ---
   The line was not a footer border. It was the perspective .grid background
   visible through the transparent footer at the viewport bottom. */
.system-bg::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:var(--bg);
  z-index:20;
  pointer-events:none;
}

/* Footer itself has NO lower edge. Keep only its real upper separator. */
.site-footer{
  border-bottom:0 !important;
}
.site-footer::after{
  content:none !important;
  display:none !important;
}


/* v20 — footer has ONE line only: the upper gold separator.
   Cover the technical background only beneath the footer's final 3px so
   perspective/grid/radar layers cannot create a second apparent line. */
.site-footer{
  position:relative !important;
  border-top:1px solid rgba(206,168,84,.18) !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.site-footer::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:-1px !important;
  width:190px !important;
  height:1px !important;
  background:linear-gradient(90deg,#d6ad58,rgba(214,173,88,.08),transparent) !important;
  box-shadow:0 0 18px rgba(214,173,88,.22) !important;
  pointer-events:none !important;
}
.site-footer::after{
  content:"" !important;
  display:block !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:3px !important;
  background:#05070a !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
  z-index:999 !important;
}

/* --- v21: gradient header separator --- */
.topbar{
  border-bottom:0 !important;
  position:relative;
}
.topbar::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    rgba(214,173,88,.95) 0%,
    rgba(214,173,88,.42) 22%,
    rgba(214,173,88,.18) 50%,
    rgba(214,173,88,.42) 78%,
    rgba(214,173,88,.95) 100%
  ) !important;
  box-shadow:0 0 14px rgba(214,173,88,.10) !important;
  pointer-events:none !important;
}

/* --- v22: header gradient originates from LEFT only --- */
.topbar::after{
  background:linear-gradient(
    90deg,
    rgba(214,173,88,.98) 0%,
    rgba(214,173,88,.62) 16%,
    rgba(214,173,88,.28) 38%,
    rgba(214,173,88,.10) 65%,
    rgba(214,173,88,0) 100%
  ) !important;
  box-shadow:none !important;
}

/* --- v23: left-origin gradient, still subtly visible at right edge --- */
.topbar::after{
  background:linear-gradient(
    90deg,
    rgba(214,173,88,.98) 0%,
    rgba(214,173,88,.68) 16%,
    rgba(214,173,88,.38) 40%,
    rgba(214,173,88,.24) 68%,
    rgba(214,173,88,.16) 86%,
    rgba(214,173,88,.12) 100%
  ) !important;
}

/* --- v25 supplied network logo --- */
.brand{align-items:center!important;gap:14px!important}
.brand-icon-image{width:56px!important;height:56px!important;min-width:56px!important;display:block!important;object-fit:contain!important;background:transparent!important;filter:drop-shadow(0 0 8px rgba(214,173,88,.14))}
@media(max-width:760px){.brand-icon-image{width:48px!important;height:48px!important;min-width:48px!important}}

/* v26 compact site header logo */
.brand{align-items:center!important;gap:12px!important}
.brand-icon-image{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;max-height:42px!important;object-fit:contain!important;display:block!important;background:transparent!important;filter:drop-shadow(0 0 6px rgba(214,173,88,.10))!important}
@media(max-width:760px){.brand-icon-image{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;max-height:36px!important}}

/* =========================================================
   v27 — HEADER / LOGO NORMALIZATION
   Fixes oversized intrinsic logo and restores compact layout.
   ========================================================= */
.topbar{
  min-height:86px !important;
  height:auto !important;
  padding:max(20px,env(safe-area-inset-top)) 0 17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  overflow:visible !important;
}

.brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 1 auto !important;
  min-width:0 !important;
}

.brand-icon-image{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  flex:0 0 46px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  filter:drop-shadow(0 0 5px rgba(214,173,88,.10)) !important;
}

.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:5px !important;
  min-width:0 !important;
}

.brand-copy strong{
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:.17em !important;
  color:#f0f2f3 !important;
  white-space:nowrap !important;
}

.brand-copy small{
  margin:0 !important;
  font-size:9px !important;
  line-height:1.1 !important;
  letter-spacing:.17em !important;
  color:#8f99a3 !important;
  white-space:nowrap !important;
}

.system-meta{
  flex:0 0 auto !important;
  align-self:center !important;
}

.hero{
  padding-top:clamp(68px,8vw,104px) !important;
}

/* Keep the intended transparent header and left-origin gradient line. */
.topbar{
  background:transparent !important;
  box-shadow:none !important;
  border-bottom:0 !important;
}
.topbar::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    rgba(214,173,88,.98) 0%,
    rgba(214,173,88,.68) 16%,
    rgba(214,173,88,.38) 40%,
    rgba(214,173,88,.24) 68%,
    rgba(214,173,88,.16) 86%,
    rgba(214,173,88,.12) 100%
  ) !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  .topbar{
    min-height:74px !important;
    padding:max(16px,env(safe-area-inset-top)) 0 14px !important;
    gap:14px !important;
  }
  .brand-icon-image{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    flex-basis:40px !important;
  }
  .brand-copy strong{font-size:12px !important}
  .brand-copy small{font-size:7.5px !important}
  .clock{font-size:12px !important}
  .hero{padding-top:58px !important}
}

/* v32 premium icon visible in site header */
.brand-icon-image{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  object-fit:contain!important;
  display:block!important;
}
@media(max-width:760px){
  .brand-icon-image{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
  }
}

.gold-listening{
 display:inline-block;
 background:linear-gradient(90deg,#8f6724 0%,#d4a64a 24%,#f3d27a 50%,#d6a94c 76%,#8c6525 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#d4a64a;
 text-shadow:0 0 22px rgba(214,169,76,.08);
}

.system-online-text{color:#72d89a!important;text-shadow:0 0 10px rgba(114,216,154,.18)}
.clock-seconds{color:#e89a3c!important;text-shadow:0 0 9px rgba(232,154,60,.16)}

/* v37 — active card status treatment */
.project-card .status{
  color:#72d89a !important;
  font-weight:700 !important;
  text-shadow:0 0 10px rgba(114,216,154,.18) !important;
}

.project-card .status i{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  display:inline-block !important;
  margin-right:7px !important;
  background:#ffffff !important;
  box-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 12px rgba(255,255,255,.55) !important;
  animation:m31StatusPulse 2.4s ease-in-out infinite !important;
}

@keyframes m31StatusPulse{
  0%{
    background:#ffffff;
    box-shadow:
      0 0 6px rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,.65);
    transform:scale(.90);
    opacity:.95;
  }
  33%{
    background:#ff8a1f;
    box-shadow:
      0 0 7px rgba(255,138,31,1),
      0 0 16px rgba(255,138,31,.78),
      0 0 24px rgba(255,138,31,.36);
    transform:scale(1.22);
    opacity:1;
  }
  66%{
    background:#63e08e;
    box-shadow:
      0 0 7px rgba(99,224,142,1),
      0 0 16px rgba(99,224,142,.72),
      0 0 24px rgba(99,224,142,.28);
    transform:scale(1.05);
    opacity:1;
  }
  100%{
    background:#ffffff;
    box-shadow:
      0 0 6px rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,.65);
    transform:scale(.90);
    opacity:.95;
  }
}

@media (prefers-reduced-motion:reduce){
  .project-card .status i{
    animation:none !important;
    background:#63e08e !important;
    transform:none !important;
  }
}

/* v38 — card node + route accents */
.project-card .index{
  color:#ff922b !important;
  text-shadow:0 0 10px rgba(255,146,43,.16) !important;
}

/* Match the gold/silver character of the route-arrow treatment. */
.project-card .card-footer > span{
  display:inline-block !important;
  background:linear-gradient(
    90deg,
    #b8842f 0%,
    #e3b95d 24%,
    #f0d78f 43%,
    #c5ccd1 62%,
    #eef1f2 76%,
    #c29b4b 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:#d8b45c !important;
  text-shadow:0 0 10px rgba(216,180,92,.08) !important;
}

/* v39 — stronger animated status + premium title gradient */

/* Top site title gold/silver gradient */
.brand-gradient{
  display:inline-block;
  background:linear-gradient(
    90deg,
    #9d742d 0%,
    #d6aa50 20%,
    #f1d486 40%,
    #c7ced3 62%,
    #eef1f3 78%,
    #c49b4b 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#d8b45c;
  text-shadow:0 0 12px rgba(216,180,92,.08);
}

/* ACTIVE text itself pulses, not just the dot */
.project-card .status{
  color:#69df91 !important;
  font-weight:700 !important;
  animation:m31ActiveTextPulse 1.8s ease-in-out infinite !important;
}

@keyframes m31ActiveTextPulse{
  0%,100%{
    color:#5fdc8a;
    text-shadow:0 0 5px rgba(95,220,138,.15);
    opacity:.82;
  }
  50%{
    color:#8affac;
    text-shadow:
      0 0 7px rgba(138,255,172,.65),
      0 0 15px rgba(95,220,138,.34);
    opacity:1;
  }
}

/* Stronger dot animation: white -> vivid orange -> vivid green */
.project-card .status i{
  animation:m31StatusColorPulse 1.8s linear infinite !important;
  will-change:transform,background-color,box-shadow !important;
}

@keyframes m31StatusColorPulse{
  0%,100%{
    background:#ffffff !important;
    transform:scale(.86);
    box-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 11px rgba(255,255,255,.82),
      0 0 18px rgba(255,255,255,.34) !important;
  }
  33%{
    background:#ff8618 !important;
    transform:scale(1.30);
    box-shadow:
      0 0 6px rgba(255,134,24,1),
      0 0 14px rgba(255,134,24,.95),
      0 0 24px rgba(255,134,24,.60) !important;
  }
  66%{
    background:#52e77f !important;
    transform:scale(1.13);
    box-shadow:
      0 0 6px rgba(82,231,127,1),
      0 0 14px rgba(82,231,127,.92),
      0 0 24px rgba(82,231,127,.52) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .project-card .status{
    animation:none !important;
    color:#69df91 !important;
  }
  .project-card .status i{
    animation:none !important;
    background:#52e77f !important;
    box-shadow:0 0 9px rgba(82,231,127,.7) !important;
  }
}

/* =========================================================
   v40 — forced fresh visual status/title treatment
   ========================================================= */

/* TOP TITLE: apply directly to actual existing markup */
.brand-copy strong{
  display:inline-block !important;
  background:linear-gradient(
    90deg,
    #a9792f 0%,
    #d8aa4f 22%,
    #f1d78a 43%,
    #c8cfd4 63%,
    #f1f3f4 79%,
    #c29a49 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:#d8b45c !important;
  text-shadow:0 0 12px rgba(216,180,92,.08) !important;
}

/* ACTIVE text: always green, visibly pulsing brightness/glow */
.project-card .status{
  color:#68e293 !important;
  font-weight:700 !important;
  animation:m31ActivePulseV40 1.55s ease-in-out infinite !important;
}

@keyframes m31ActivePulseV40{
  0%,100%{
    opacity:.58;
    text-shadow:0 0 3px rgba(104,226,147,.12);
    filter:brightness(.88);
  }
  50%{
    opacity:1;
    text-shadow:
      0 0 7px rgba(104,226,147,.95),
      0 0 16px rgba(104,226,147,.48);
    filter:brightness(1.32);
  }
}

/* The old dot had !important background values that blocked keyframe colors.
   Hide its own fill and animate a dedicated pseudo-element instead. */
.project-card .status i{
  position:relative !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  border-radius:50% !important;
  display:inline-block !important;
  margin-right:7px !important;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
  overflow:visible !important;
}

.project-card .status i::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  background:#fff;
  animation:m31DotPulseV40 1.65s linear infinite !important;
  will-change:background,transform,box-shadow;
}

@keyframes m31DotPulseV40{
  0%,100%{
    background:#ffffff;
    transform:scale(.86);
    box-shadow:
      0 0 5px rgba(255,255,255,1),
      0 0 11px rgba(255,255,255,.84),
      0 0 18px rgba(255,255,255,.34);
  }
  33%{
    background:#ff8517;
    transform:scale(1.32);
    box-shadow:
      0 0 6px rgba(255,133,23,1),
      0 0 14px rgba(255,133,23,.98),
      0 0 24px rgba(255,133,23,.62);
  }
  66%{
    background:#55ed84;
    transform:scale(1.14);
    box-shadow:
      0 0 6px rgba(85,237,132,1),
      0 0 14px rgba(85,237,132,.96),
      0 0 24px rgba(85,237,132,.56);
  }
}

/* User explicitly requested motion: keep it active even if OS Reduce Motion is on. */
@media (prefers-reduced-motion:reduce){
  .project-card .status{
    animation:m31ActivePulseV40 1.55s ease-in-out infinite !important;
  }
  .project-card .status i{
    animation:none !important;
    background:transparent !important;
  }
  .project-card .status i::before{
    animation:m31DotPulseV40 1.65s linear infinite !important;
  }
}

/* v41 — system information color hierarchy */
.sys-label{
  font-weight:700 !important;
  letter-spacing:.14em !important;
}

.network-label{
  color:#ff922b !important;
  text-shadow:0 0 8px rgba(255,146,43,.14) !important;
}
.gateway-value{
  display:inline-block !important;
  background:linear-gradient(90deg,#b8862f 0%,#e1b557 30%,#d8dde1 66%,#f0f2f3 82%,#c49b49 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:#d8b45c !important;
}

.routing-label{
  color:#ff922b !important;
  text-shadow:0 0 8px rgba(255,146,43,.14) !important;
}
.availability-value{
  color:#72d89a !important;
  text-shadow:0 0 10px rgba(114,216,154,.16) !important;
}

.protocol-label{
  color:#ff922b !important;
  text-shadow:0 0 8px rgba(255,146,43,.14) !important;
}
.observer-value{
  display:inline-block !important;
  background:linear-gradient(90deg,#c4cbd0 0%,#eef1f3 36%,#d5ab55 70%,#aa7b2f 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:#d4b36b !important;
}

/* v42 — premium depth/shadows for all project cards */
.project-card{
  box-shadow:
    0 16px 38px rgba(0,0,0,.42),
    0 5px 14px rgba(0,0,0,.32),
    0 0 22px rgba(214,169,76,.055),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}
.project-card:hover{
  box-shadow:
    0 22px 48px rgba(0,0,0,.52),
    0 8px 20px rgba(0,0,0,.38),
    0 0 30px rgba(214,169,76,.10),
    0 0 10px rgba(190,205,218,.035),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* v43 — premium project card icon treatment */
.project-card .project-symbol{
  position:relative !important;
  width:46px !important;
  height:46px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.055),transparent 46%),
    linear-gradient(145deg,rgba(214,169,76,.085),rgba(150,172,190,.028) 58%,rgba(0,0,0,.10)) !important;
  border:1px solid rgba(214,169,76,.14) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 18px rgba(214,169,76,.045) !important;
}

.project-card .project-symbol::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:11px !important;
  border:1px solid rgba(205,214,221,.035) !important;
  pointer-events:none !important;
}

.project-card .project-symbol svg{
  width:26px !important;
  height:26px !important;
  overflow:visible !important;
  filter:
    drop-shadow(0 0 4px rgba(214,169,76,.18))
    drop-shadow(0 2px 3px rgba(0,0,0,.36)) !important;
}

.project-card .project-symbol svg path,
.project-card .project-symbol svg circle,
.project-card .project-symbol svg line,
.project-card .project-symbol svg polyline,
.project-card .project-symbol svg polygon{
  stroke:url(#m31-card-icon-gradient) !important;
  stroke-width:1.7 !important;
}

/* Fallback for SVGs that do not accept external paint-server references */
.project-card .project-symbol{
  color:#d9b15c !important;
}
.project-card .project-symbol svg{
  stroke:#d9b15c !important;
}

/* Card-specific premium accents */
.project-card:nth-child(1) .project-symbol{
  background:
    radial-gradient(circle at 35% 25%,rgba(248,215,139,.09),transparent 44%),
    linear-gradient(145deg,rgba(195,143,50,.11),rgba(163,184,198,.035) 62%,rgba(0,0,0,.11)) !important;
}
.project-card:nth-child(1) .project-symbol svg{
  stroke:#e1b85f !important;
  filter:
    drop-shadow(0 0 5px rgba(225,184,95,.24))
    drop-shadow(0 2px 3px rgba(0,0,0,.36)) !important;
}

.project-card:nth-child(2) .project-symbol{
  background:
    radial-gradient(circle at 35% 25%,rgba(218,226,232,.085),transparent 46%),
    linear-gradient(145deg,rgba(167,178,188,.075),rgba(196,151,66,.07) 64%,rgba(0,0,0,.11)) !important;
}
.project-card:nth-child(2) .project-symbol svg{
  stroke:#cfd6db !important;
  filter:
    drop-shadow(0 0 5px rgba(207,214,219,.18))
    drop-shadow(0 0 3px rgba(212,166,74,.14))
    drop-shadow(0 2px 3px rgba(0,0,0,.36)) !important;
}

.project-card:nth-child(3) .project-symbol{
  background:
    radial-gradient(circle at 35% 25%,rgba(255,148,42,.085),transparent 46%),
    linear-gradient(145deg,rgba(214,169,76,.095),rgba(155,175,190,.035) 62%,rgba(0,0,0,.11)) !important;
}
.project-card:nth-child(3) .project-symbol svg{
  stroke:#e4b65a !important;
  filter:
    drop-shadow(0 0 5px rgba(228,182,90,.22))
    drop-shadow(0 0 3px rgba(255,146,43,.12))
    drop-shadow(0 2px 3px rgba(0,0,0,.36)) !important;
}

.project-card:hover .project-symbol{
  border-color:rgba(223,183,91,.26) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 22px rgba(214,169,76,.085) !important;
}

/* =========================================================
   v44 — refined premium card icons
   Remove boxy/plastic look. Use clean metallic line symbols.
   ========================================================= */
.project-card .project-symbol{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}

.project-card .project-symbol::before,
.project-card .project-symbol::after{
  content:none !important;
  display:none !important;
}

.project-card .project-symbol svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
  overflow:visible !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  stroke-width:1.55 !important;
  opacity:.98 !important;
  background:none !important;
}

/* Force every inner shape to inherit the premium stroke */
.project-card .project-symbol svg *,
.project-card .project-symbol svg path,
.project-card .project-symbol svg circle,
.project-card .project-symbol svg line,
.project-card .project-symbol svg polyline,
.project-card .project-symbol svg polygon,
.project-card .project-symbol svg rect{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.55 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Card 1 — warm champagne gold */
.project-card:nth-child(1) .project-symbol{
  color:#e3b95f !important;
}
.project-card:nth-child(1) .project-symbol svg{
  filter:
    drop-shadow(0 0 2px rgba(227,185,95,.34))
    drop-shadow(0 0 8px rgba(227,185,95,.10)) !important;
}

/* Card 2 — platinum silver with a whisper of gold */
.project-card:nth-child(2) .project-symbol{
  color:#d3d9de !important;
}
.project-card:nth-child(2) .project-symbol svg{
  filter:
    drop-shadow(0 0 2px rgba(211,217,222,.28))
    drop-shadow(0 0 8px rgba(211,217,222,.08)) !important;
}

/* Card 3 — richer amber-gold */
.project-card:nth-child(3) .project-symbol{
  color:#dc9f41 !important;
}
.project-card:nth-child(3) .project-symbol svg{
  filter:
    drop-shadow(0 0 2px rgba(220,159,65,.34))
    drop-shadow(0 0 8px rgba(220,159,65,.10)) !important;
}

/* Premium hover: brighten, never shift geometry */
.project-card:hover .project-symbol{
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.project-card:hover .project-symbol svg{
  opacity:1 !important;
}
.project-card:nth-child(1):hover .project-symbol{
  color:#f1ca75 !important;
}
.project-card:nth-child(2):hover .project-symbol{
  color:#eef2f4 !important;
}
.project-card:nth-child(3):hover .project-symbol{
  color:#efb65a !important;
}

@media(max-width:760px){
  .project-card .project-symbol{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  .project-card .project-symbol svg{
    width:27px !important;
    height:27px !important;
  }
}

/* =========================================================
   v45 — ICONS ONLY. Absolutely no square/container behind them.
   ========================================================= */
.project-card .project-symbol,
.project-card:hover .project-symbol,
.project-card:nth-child(1) .project-symbol,
.project-card:nth-child(2) .project-symbol,
.project-card:nth-child(3) .project-symbol{
  position:relative !important;
  width:48px !important;
  height:44px !important;
  min-width:48px !important;
  min-height:44px !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border:none !important;
  outline:none !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.project-card .project-symbol::before,
.project-card .project-symbol::after,
.project-card:hover .project-symbol::before,
.project-card:hover .project-symbol::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.project-card .project-symbol svg{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  max-width:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  opacity:1 !important;
}

/* clean premium metallic line colors */
.project-card:nth-child(1) .project-symbol{color:#e7bd62 !important}
.project-card:nth-child(2) .project-symbol{color:#dce1e5 !important}
.project-card:nth-child(3) .project-symbol{color:#e4a548 !important}

.project-card:nth-child(1) .project-symbol svg{
  stroke:#e7bd62 !important;
  filter:drop-shadow(0 0 4px rgba(231,189,98,.22)) !important;
}
.project-card:nth-child(2) .project-symbol svg{
  stroke:#dce1e5 !important;
  filter:drop-shadow(0 0 4px rgba(220,225,229,.18)) !important;
}
.project-card:nth-child(3) .project-symbol svg{
  stroke:#e4a548 !important;
  filter:drop-shadow(0 0 4px rgba(228,165,72,.22)) !important;
}

.project-card .project-symbol svg *,
.project-card .project-symbol svg path,
.project-card .project-symbol svg circle,
.project-card .project-symbol svg line,
.project-card .project-symbol svg polyline,
.project-card .project-symbol svg polygon,
.project-card .project-symbol svg rect{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.65 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

@media(max-width:760px){
  .project-card .project-symbol{
    width:44px !important;
    height:40px !important;
    min-width:44px !important;
    min-height:40px !important;
  }
  .project-card .project-symbol svg{
    width:33px !important;
    height:33px !important;
    min-width:33px !important;
    min-height:33px !important;
    max-width:33px !important;
    max-height:33px !important;
  }
}