/* The Web Maven — Component primitives
   Extracted from the glassmorphism trust-hero reference and adapted to TWM.
   This layer is intentionally framework-free. It composes over system/twm.css.
*/
:root{
  --glass-1:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.025);
  --glass-border:rgba(244,239,230,.12);
  --glass-highlight:rgba(255,255,255,.08);
  --glass-shadow:0 24px 80px rgba(0,0,0,.22);
}
.glass-surface{
  position:relative;
  border:1px solid var(--glass-border);
  background:linear-gradient(145deg,var(--glass-1),var(--glass-2));
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  backdrop-filter:blur(18px) saturate(115%);
}
.glass-surface::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.hero--trust{
  isolation:isolate;
}
.hero--trust::before{
  content:"";
  position:absolute;
  inset:10% auto auto 48%;
  width:min(52vw,720px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(214,163,84,.13),transparent 67%);
  filter:blur(18px);
  z-index:-1;
}
.hero__trust{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:28px;
  max-width:760px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.018);
}
.trust-signal{
  min-height:78px;
  padding:13px 14px 12px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.trust-signal:last-child{border-right:0}
.trust-signal__index{
  color:var(--amber);
  font:700 .55rem var(--mono);
  letter-spacing:.12em;
}
.trust-signal__value{
  color:var(--cream);
  font-size:.82rem;
  line-height:1.2;
  font-weight:700;
}
.trust-signal__meta{
  color:var(--dim);
  font:600 .56rem/1.25 var(--mono);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.system-map{
  background:
    radial-gradient(circle at 72% 22%,rgba(214,163,84,.09),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(14px) saturate(108%);
  backdrop-filter:blur(14px) saturate(108%);
  box-shadow:0 26px 90px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.055);
}
.system-map::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:calc(50% - 110px);
  top:calc(52% - 110px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,163,84,.11),transparent 68%);
  filter:blur(12px);
  pointer-events:none;
}
.system-map__node{
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.system-map__node:hover{
  transform:translateY(-3px);
  border-color:rgba(214,163,84,.32);
  background:rgba(18,15,11,.82);
  box-shadow:0 18px 36px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.055);
}
.system-map__core{
  animation:twm-core-pulse 7s ease-in-out infinite;
}
@keyframes twm-core-pulse{
  0%,100%{box-shadow:0 18px 55px rgba(214,163,84,.18),inset 0 1px rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(1)}
  50%{box-shadow:0 22px 72px rgba(214,163,84,.28),inset 0 1px rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(1.025)}
}
.project,.contact-panel,.diagram,.cta__box{
  -webkit-backdrop-filter:blur(10px) saturate(108%);
  backdrop-filter:blur(10px) saturate(108%);
}
.contact-panel,.diagram{
  box-shadow:0 18px 60px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.035);
}
.button--light{box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.38)}
.button--outline:hover{box-shadow:0 10px 30px rgba(214,163,84,.06)}
.nav-cta{box-shadow:0 9px 25px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.38)}
@media(max-width:980px){
  .hero__trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-signal:nth-child(2){border-right:0}
  .trust-signal:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
  .hero--trust::before{left:20%;width:90vw}
  .hero__trust{grid-template-columns:1fr 1fr;margin-top:24px}
  .trust-signal{min-height:74px;padding:12px}
  .trust-signal__value{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){
  .system-map__core{animation:none}
  .system-map__node{transition:none}
}